✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

CSS3 Transform

CSS3 Transform is used to manipulate the elements.It can be used to rotate, skew, scale,matrix and translate the elements.Like rotate the element on mouse over or tilt the element on mouse over etc.



Rotate

It is used to rotate the element by giving the value in deg


transform:rotate(10deg);

This will rotate the box 10 deg in anti clockwise



Skew

It is used to tip the horizontal and vertical


transform:skew(30deg,20deg);

This will tip over the x-axis by 30 degrees on the y-axis by 20 degrees



Scale

It is used to change the width and height of an element


transform:scale(2);

This will increase the dimensions by 2 times.You can a also use value less than "1" such as "0.5" it will decrease the dimmension by 2 times.


Or you can use width and height seperately.


transform:scale(2,4);

This will increase the horizontal dimension by 2 times and vertical dimension by 4 times.You can a also use value less than "1" such as "0.5" it will decrease the dimmension by 2 times.



Translate

It is used to move the element horizontal and vertical


transform:translate(50px,100px);

This will move the box 50px right and 100px down



Matrix

It is used to combine all the 2D transform method into one.The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.


transform: matrix(2,-0.35,0.35,2,0,0);

This will move the box 50px right and 100px down




2D Transform Methods

  • rotate(angle)is used to rotate

  • skewY(angle)is used to skew along Y axis

  • skewX(angle)is used to skew along X axis

  • skew(X-angle,Y-angle)is used to skew along X axis and Y axis both

  • scaleY()is used to scale vertically(height).

  • scaleX()is used to scale horizontally(width).

  • scale(x,y)is used to scale both in horizontal and vertical dimension.

  • translateY()is used to translate along Y axis

  • translateX()is used to translate along X axis

  • translate(x,y)is used to translate along X axis and Y axis both

  • matrixis used to define combined transformation




3D Transform Methods

  • rotate3d(x,y,z)is used to rotate 3D

  • rotateZ(angle)is used to rotate along z-axis

  • scale3d(x,y,z)is used to scale 3D

  • scaleZ(angle)is used to scale along z-axis

  • translate3d(x,y,z)is used to traslate 3D

  • translateZ(angle)is used to translate along z-axis

  • matrix3dis used to define combined transformation in 3D,using a 4x4 matrix of 16 values

❮ PrevNext ❯