Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS Visual effects

Wednesday, April 1st, 2020 by Helge

This article focuses on 2-D varieties which  are supported on all major browser versions with vendor prefixes.css_html

You can apply a transform to the normal state of an element and it will appear in its transformed state when the page loads. Just be sure that the page is still usable on browsers that don’t support transforms. It is common to pull out the transforms only when users interact with the element via a rollover or JavaScript event. Either way, transforms are a good candidate for progressive enhancement—if an IE user sees an element straight instead of on a jaunty angle, it’s probably no biggie.

When an element transforms, its element box keeps its original position and influences the layout around it, in the same way that space is left behind by a relatively positioned element. It is as though the transformation magically picks up the pixels of the rendered element, messes around with them, and lays them back down on top of the page. So if you move an element with transform, you’re only moving a picture of it. That picture has no effect on the surrounding layout.

Let’s go through the transform functions one by one, starting with rotate.

Transforming the angle (rotate)

If you’d like an element to appear on a bit of an angle, use the rotate transform function. The value of the rotate function is an angle specified in positive or negative degrees. The image has been rotated –10 degrees (350 degrees) using the following style rule. The tinted image shows the element’s original position for reference.

img {
width: 300px;
height: 400px;
transform: rotate(-10deg);

Notice that the image rotates around its center point, which is the default point around which all transformations happen. But you can change that easily with the transform-origin property.

Transformable Elements

You can apply the transform property to the following element types:

  • HTML elements with replaced content, such as img, canvas, form inputs, and embedded media
  • Elements with display: block
  • Elements with display: inlineblock
  • Elements with display: inlinetable


Values: percentage | length | left | center | right | top | bottom
Default: 50% 50%
Applies to: transformable elements
Inherits: no

The value for transform-origin is either two keywords, length measurements, or percentage values. The first value is the horizontal offset, and the second is the vertical offset. If only one value is provided, it will be used for both. If we wanted to rotate the redwood forest image around a point at the center of its top edge, we could write it in any of the following ways:

transform-origin: center top;
transform-origin: 50%, 0%;
transform-origin: 150px, 0;

It is easy to demonstrate the origin point with the rotate function, but keep in mind that you can set an origin point for any of the transform functions.

Sources for further reading

CSS Visual effects, 5.0 out of 5 based on 8 ratings
Categories: Guides & Tutorials
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.