realLifeinfo

CSS transform explained in details

Nerd, Solutions 

CSS transform allows a CSS developer to move, rotate, scale and skew HTML elements via CSS properties. CSS transform can either be in 2D or in 3D. D stands for Dimensional.

Sponsored

CSS transform is made possible by two CSS properties, which are transform-property and transform-origin.

CSS transform property

The transform-property is used to specify the type of the transformation function that applied to the CSS selector. And these transform functions can be one of these four functions.

CSS transformation functions and their meaning

CSS transform rotate: rotate(deg)

This function takes one argument, which is in degree and specify how much should the object be rotated in a 2 dimensional space.

There are other two flavors of this function, which are rotatex(deg) and rotatey(deg). Both take one argument in degree that specify how much should the object be rotated on the specified axis. The rotatex will rotate the element in x axis, and rotatey will rotate the element in y axis.

CSS transform scale: scale(x, y)

This function takes two arguments, which are for x and y values of the element. This function uses the specified arguments and multiply them with the height and width of the element. Example when we pass 0.5 and 0.5 for x and y respectively for an element with 200px width and 200px height. The scale function is going to scale the element down to 100px width and 100px height because 0.5 X 200px = 100px. When 1 is passed the result will be the same as the initial measurements. The scale function will leave the element as it is.

Another thing to note about this function is when x and y values are the same. In this situation we don't need to specify each argument with its own value, instead we pass only single value and the scale function is going to use the same value for both x and y.

There are other two flavors of this function, which are scalex(x) and scaley(y). Each one of these functions scale the element into a particular axis, either in x axis or in y axis.

CSS transform translate: translate(x, y)

This function takes two arguments, which are for x and y values of the element. The specified arguments can be in any valid measurement units. Example: translate(500px, 500px). This function will move the element 500px in x axis and 500px in y axis.

Sponsored

There are other two flavors of this function, which are translate(x) and translate(y). Each one of these functions move the element into a particular axis, either in x axis or in y axis.

CSS transform skew: skew(deg)

This function takes one argument, which is in degree, and specify how much to skew the object. The default axis is x axis, so this function is similar to skewx(deg) function.

The other skew function is skewy(deg), which skew the object on y axis.

CSS transform origin property

The transform-origin property is used to specify the transformation point (origin) of the transformed element to the browser.

The default transform-origin values are 50% 50% 0. The first value is for x, the second value is for y, and the third value is for z-offset that is required in 3D transforms.

Multiple transforms

Multiple transforms can be applied on the same element on the same transform property at the same time. This is achieved by specifying multiple transform functions separated by whitespace.

Example:

#div1{

     transform: translate(200px, 200px) scale(2);

}

This transform above will move the div element 200px to the right and 200px to the bottom. Also the size of the element will be scaled two times its initial size.

The different between the CSS multiple transition syntax and CSS multiple transform syntax is in transition we use comma to separate multiple transitions, and we use whitespace to separate multiple transforms.

CSS transform with CSS transition combined

We can also use CSS transform as CSS transition property that transition is applied to. This gives CSS transform an animation like behavior and feel that is achieved purely through CSS without JavaScript help.

Example:

In this example we are going to move -- translate -- our dive to 200px right and 100px to the bottom, scale the element by 2 and rotate the element by 180 degrees on mouse hover, and apply CSS transition of 2 seconds with ease-in-out transition-timing-function.

//initial state of the div element 

 

#div1{

     transition: transform 2s ease-in-out;

}

//on hover state of the div element

#div1{

     transform: translate(200px, 100px) scale(2) rotate(180deg);

}

As you can see from above example, transform has been used as the transition property in the initial state of the div element.

If you are interested in learning about CSS 3D transform functions, you can check the official w3c documentation via this this url. CSS transform in 3 dimensional.

Sponsored