css

CSS transforms allow you to apply a set of changes called transformations to any element. Transforms are implemented using the transform properties transform-origin and transform. The transform-origin property is used to set the origin of the element. If unspecified, the origin is set to be the center of the element. The transform property is used to apply the actual transformations to the element. The values the transform property takes are rotate, scale, translate, skew and matrix. A value of ‘none’ indicates that no transformation should be performed. When an element is transformed in CSS the surrounding elements and document are not affected. Applying transforms to floats therefore is not possible since other elements in the document will not re-adjust in response to the transform action. 2D and 3D transformations are possible in CSS.

2D transforms are simple to implement and several examples are shown below. 3D transforms however require a bit more effort. To use 3D transforms first a perspective must be set which controls how deep or close the user views the 3D transform. After that the transform can be applied to the element. A comprehensive list of all the CSS transforms can be found here.

2D transformations

Below are examples of 2D transformations. To test out any of the code,  copy and paste this code into the editor and change the transform property to what is shown in each example below.

This is the original image to which the transformations will be applied.

original1

See the Pen vyMYBq by Remi D (@Remi7497) on CodePen.

Rotate- As the name implies, rotate allows you to rotate the image a certain number of degrees. The image below is rotated 30 degrees. Positive values rotate the image clockwise while negative values rotate the image anticlockwise.

rotate1

Scale- Scale is used to change the size of the image. It can take one value or two values. Writing scale(10) will increase the image ten times it’s original size. However, writing scale(0.5, 1.12) as shown below will decrease the width by a factor of 0.5 and increase the height by a factor of 1.12. The resulting effect is a stretched looking image.

scale1

Skew- The skew property tilts the image in the x or y direction. As you can see below the image is tilted to the left after a skew of 20 degrees is applied to it in the x direction.

skew1

Translate- The translate property moves the image to the specified length value in the x direction and y direction. The code line below would move the image 20 px to the right and 40 px down.

Matrix- The matrix property allows you apply all the transformations at once. It takes six values. If there is a value for which you don’t want a transformation just put a value of 0 for that transform.

matrix

3D transformations

Applying 3D transforms requires the additional task of adding perspectives. A perspective morphs the space into a 3D space. The 3D transform allows you to rotate, scale, skew and translate on the X, Y and Z axis. The smaller the perspective value, the more dramatic the effect produced. This is demonstrated in the following example. Below the image is rotated 55 degrees around the X and Y axis at first 100px perspective and then at 50px perspective.

perspective(100px) rotateX(55deg)                    perspective(100px) rotateY(55deg)

100x55                                                            100y55

perspective(50px) rotateX(55deg)                     perspective(50px) rotateY(55deg)

50x55                            50y55

Conclusion

CSS transforms allow you to rotate, skew, scale, and translate elements. Any element can be transformed including text, images, background images and more. CSS transforms can be animated as well. 2D and 3D transformations can be implemented in most recent browsers. The -webkit and -moz prefixes are available for performing transforms in Chrome and Firefox.

 

Comments