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:
- If n>1, it is magnified by n-1
- 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!