in

CSS3 Transform Property

IMG 20200422 123002

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 4×4 matrix of 16 values

Written by YT Solution

What do you think?

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0
flip animation

Animated Login and SignUp Form With Flip Animation using CSS3 and jQuery

vertical-accordion

Simple Way to Create Vertical Accordion Using CSS