UI Development

Inside “Transforms” in CSS

CSS Transform, as the name indicates manipulation of HTML elements. It allows the elements which are styled in CSS to get transformed to 2D. In order to transform elements of HTML, transform property is used. You can change the shape of elements, you can resize it and also change the position of elements.

It is given by,

transform: function(parameters)

2D Transformations:

2D is more simpler than 3D.

There are 4 methods in 2D transformations. They are as follows:

     1. skew(x,y):

It allows skewing elements along X and Y axis. It takes 2 parameters.

(a) Dimensions of x-axis.

(b) Dimensions of y-axis.

Eg: skew(15deg, 20deg)

We can even target only the x argument or y argument by using skewX and skewY.

(I) skewX(x): skew elements along X-axis.

Eg: skewX(15deg)

(II)skewY(y): skew elements along Y-axis.

Eg: skewY(20deg)

 

You are allowed to use even negative values in the parameters.

       2. scale(x,y):

It allows expansion and reduction in the size of an element. It also takes 2 parameters.

(a) width of an element.

(b) height of an element.

Eg: scale(1,1) changes to scale(0.5, 0.5)

      

Here, width and height changed to 50px.

We can choose to resize the element by passing width or height by  using scaleX and scaleY.

(I)scaleX(x): resizing element based on width.

Eg: scaleX(2)

(II)scaleY(y):  resizing element based on height.

Eg: scaleY(2)

     3. rotate:

It allows rotation of an element clockwise or anti-clockwise based on the given degree. This method takes only 1 argument with positive and negative values.

Eg: rotate(20deg)- rotates clockwise

rotate(-20deg)- rotates anti-clockwise

     4. translate(x,y):

It allows to move an element from its current position on X, Y axis or both.It takes 2 parameters. It can take both positive and negative values

(a) Dimensions of x-axis.

(b) Dimensions of y-axis.

Eg: translate(10px, 20px)

(I)translateX(x): to move only on X-axis.

Eg: translateX(50px)- moves 50px to right.

translateX(-50px)- moves 50px to left.

(II)translateY(y): to move only on Y-axis.

Eg: translateY(50px)- moves 50px to bottom.

translateY(-50px)- moves 50px to top.

There are 2 properties of transform.They are:

  1. transform: applies transformation to an element.

    Syntax
    transform: none|transform-functions|initial|inherit;

  2. transform-origin: changes the position of an element.

    Syntax
    transform-origin: x-axis y-axis|initial|inherit;

3D Transformations:

On the other hand, when it comes to 3D transformations, it allows an element rendering by CSS to get transformed in 3-Dimensional space.

The transform methods are almost same by transforming it along the x,y and z axes respectively where x-axis allows to transform horizontally, y-axis allows to transform vertically and z-axis allows to transform front and back which is outside the 2D plane.

There are 5 properties of transform used in 3D transformations.They are:

  • perspective: We use this in order to transform in 3D-space.

    Syntax
    perspective: length|none;
  • perspective-origin: It defines where the 3D elements are placed based on the x-axis and y-axis.

    Syntax
    perspective-origin: x-axis y-axis|initial|inherit;
  • transform-origin: It allows you to change the x and y positions of the transformed elements.

    Syntax
    transform-origin: x-axis y-axis z-axis|initial|inherit;
  • transform-style: It allows the child elements to preserve 3D transform.

    Syntax
    transform-style: flat|preserve-3d|initial|inherit
  • backface-visibility: It defines whether an element should be visible or not when it doesn’t face the screen.

    Syntax
    backface-visibility: visible|hidden|initial|inherit;

We have 3 methods in 3D-Transformations which are almost same as in case of 2D.

       1.   translate:

It allows elements to move around the screen. We can move it horizontally, vertically and outside of 2D pane by using transformX( ), transformY( ) and transformZ( ) respectively.

The shorthand notation of the translate method is given by: translate3d(x-axis,y-axis,z-axis)

Eg: translate3d(50px, 50px, 0)

       2.   rotate:

It allows elements to rotate along axes. We can rotate it horizontally, vertically and outside of 2D pane by using rotateX( ), rotateY( ) and rotateZ( ) respectively.

The shorthand notation of the rotate method is given by: rotate3d(x-axis,y-axis,z-axis, angle degree) where the fourth parameter tells us by how many degrees are we intending to rotate.

Eg: rotate3d(1, 1, 1, 45deg)

       3.   scale:

It allows elements to transform based on the size unlike the other methods which emphasize on the movement of elements.

We can increase the width, height of an element using scaleX( ) and scaleY( ) repsectively. We use scaleZ( ) to transform it on 3D-pane.

The shorthand notation of the translate method is given by: scale3d(x-axis,y-axis,z-axis)

Eg: scale3d(1.5, 1.5, 1.5)

GPU acceleration:

In order to speed things up in our keyframe animation, we can use hardware acceleration, which means off-loading of work from CPU to GPU(graphic processing unit). To trigger hardware acceleration in our keyframes, we can simply set the value of transform as translate3d(0,0,0).

We can actually trigger using any of the 3d transform methods to speed-up hardware acceleration like scale3d, rotate3d, rotateZ .

Following, we have the browser compatibility for 2D and 3D transform in specific.

Therefore, we use the above transform methods to manipulate the elements by skewing, translating, scaling and rotating them in 2D and 3D panes.

 

About The Author