A detailed introduction to CSS3's translate attribute

translateAttribute is a displacement attribute. We can move an element from its current position to a specified position through the translate() method. Let me introduce it in detail below.

Through the translate() method, the element is moved from its current position, according to the given left (x coordinate) and top (y coordinate) position parameters:

The value translate(50px,100px) moves the element 50 pixels from the left and 100 pixels from the top.

rotate() method

Through the rotate() method, the element is rotated clockwise by a given angle. Negative values ​​are allowed and the element will be rotated counterclockwise.

Value rotate(30deg) rotates the element 30 degrees clockwise.

scale() method

Through the scale() method, the size of the element will increase or decrease, according to the given width (X axis) and height (Y axis) parameters:

The value scale(2,4) converts the width to 2 times the original size and the height to 4 times the original height.

skew() method

Through the skew() method, the element flips the given angle, according to the given horizontal line (X axis) and vertical line (Y axis) parameters:

The value skew(30deg,20deg) flips the element 30 degrees around the X-axis and 20 degrees around the Y-axis.

matrix() method

matrix() method combines all 2D transformation methods together. The

matrix() method takes six parameters and contains mathematical functions that allow you to: rotate, scale, move and tilt elements.

New transformation properties

The following Table lists all transformation properties:

transform Applies a 2D or 3D transformation to the element.

transform-origin allows you to change the position of the transformed element.

2D Transform method

matrix(n,n,n,n,n,n) defines 2D transformation, using a matrix of six values.

translate(x,y) defines a 2D transformation that moves elements along the X and Y axes.

translateX(n) defines 2D transformation, moving elements along the X axis.

translateY(n) defines 2D transformation, moving elements along the Y axis.

scale(x,y) defines 2D scaling transformation, changing the width and height of the element.

scaleX(n) defines 2D scaling transformation, changing the width of the element.

scaleY(n) defines 2D scaling transformation, changing the height of the element.

rotate(angle) defines 2D rotation and specifies the angle in the parameters.

skew(x-angle,y-angle) defines a 2D skew transformation, along the X and Y axes.

skewX(angle) defines a 2D skew transformation, along the X axis.

skewY(angle) defines a 2D skew transformation, along the Y axis.

I believe that after reading the introduction, you have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Tutorial on using the transform attribute in Css3

Detailed introduction to the border-image attribute in Css3

Steps to achieve flame effect with Css3 font

The above is the detailed content of A detailed introduction to CSS3's translate attribute. For more information, please follow other related articles on the PHP Chinese website!