Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

CSS3 Transform

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

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH