preface

Hi, I’m CV Takuya, and TRANSITION, animation, and transform are all confusing to me. It’s like first love.

Today, IT will take me three minutes to understand the transform!

What? You want to see transition over understanding? Click here for three minutes to see transition.

Today, IT will take me three minutes to understand the transform property!

The transform properties

Transform is to change position or shape around the x, Y, z axis, default center point.

The transform property value can be moved, rotated, and zoomed in or out.

1, the rotation

Rotate (n deg) Rotate n degrees around the center point 2D. The unit is deg. If the value in n is positive, it rotates clockwise, if it is negative, it rotates counterclockwise, and deg represents the rotation Angle

RotateX (n deg) rotation, n degrees up and down with the X-axis as the center of rotation.

RotateY (n deg) rotation, with the Y-axis as the center of rotation, rotating left and right by n degrees.

RotateZ (n deg) rotation, with the z-axis as the center of rotation and the plane rotated by n degrees. Rotate (n deg)

Rotate3d (x,y,z,n deg) 3D rotate3D (x,y,z,n deg) 3D rotate3D (x, Y,z,n deg) The axis of rotation is defined by a set of [x, y, z] vectors that will be internally and implicitly normalized if these vectors are given non-standard values, i.e. the sum of the squares of the three coordinate values does not equal 1. Nonstandard vectors, such as null values and [0, 0, 0], will render rotation ineffective. (HERE I don’t understand, welcome to add)

Rotate 30 degrees clockwise: transform: rotate(30deg); Transform: rotate(-30deg); Transform: rotateX(30deg); Transform: rotateY(30deg); Transform: rotate3d(1,1,1,45deg)Copy the code

2, mobile

Translate (x,y) can be passed with two parameters, equivalent to translateX(x) and translateY(y).

If x is positive. I’m going to move x to the right. Negative values move x to the left.

If y is positive. I’m going to move down by y. Negative values move up by y.

X and y can be px or %.

Translate (x,y) : The box moves in the x and Y directions.

When the translateX(x) moves, the box as a whole moves x distance in the x direction.

When the translateY(y) moves, the box as a whole moves in the y direction by a distance of y magnitude.

Transform: Translate (100px,120px); Transform: translateX(10%); Transform: translateX(10%) Transform: translateY(10%); Transform: translateY(10%);Copy the code

3, scaling

Scale is the same as translate move, except that the center point does not move when scaling.

The scaling base is 1, how many times n is relative to 1:

  1. If n>1, it is magnified by n-1
  2. If n is less than 1, it is shrunk by a factor of 1-N

Scale (n) scales the x and y axes by n times.

ScaleX (n) scales n times the width of the x axis.

ScaleY (n) scale, scale n times the height on the y axis.

Transform: scale(1.5); Transform: scale(0.5); transform: scale(0.5); Transform: scaleX(0.5); transform: scaleX(0.5); Transform: scaleY(1.5); transform: scaleY(1.5);Copy the code

4. Twist (tilt)

Skew is a stretch of x and y. Valid values are within 90 degrees, and anything greater than 90 degrees will stretch in the opposite direction.

Skew (x DEg, Y DEG) : Stretch the box x and Y degrees to the X and Y axes to achieve the distortion effect.

SkewX (x DEG) : Stretch the box x degrees toward the X axis to achieve the distortion effect.

SkewY (y deg) : Stretch the box y degrees towards the Y axis to achieve the distortion effect.

Transform: SkeW (30DEG, 30DEG); Transform: skewY(30DEg); Transform: skewX(30DEg);Copy the code

There are also matrix matrix and Perspective element distance views, which are more complex and can be checked if you are interested. I won’t be able to read it in three minutes!

The transform of compatibility

According to Canius, you can know compatibility, ie8 below is not supported

conclusion

Transformations allow our modules to move, deform, zoom in and out to meet the needs of page styles in daily development. If it helps, please give it a thumbs up!