animation
2D
translation
transform:translate(20px); Move 20px to the right.
transform:translate(20px,20px); Move 20px to the right and down.
transform:translate(-20px,-20px); Move to the left and move up 20px
transform:translateX(-20px); Move 20px to the left
transform:translateY(20px); Move up 20px
rotate
transform:rotate(60deg); Rotate 60 degrees clockwise.
transform:rotate(-60deg); Counterclockwise rotation of 60 degrees
transform:rotate(-3turn); Counterclockwise rotation of 3 circles =360*3 degrees
Design sketch:
zoom
transform:scale(1.1); The width and height are magnified 1.1 times.
transform:scaleX(1.1); 1.1 times magnification.
transform:sacleY(1.1); High magnification 1.1 times
transform:sacleY(1.1,1.2); Wide magnification 1.1 times, high magnification 1.2 times.
transform:scale(0.5); The height is half the original.
tilt
transform:skew(45deg); xAxis tilted 45 degrees
transform:skewY(45deg); YAxis tilted 45 degrees
transition
transition-property:transformOr all； Which attribute is added to the transitional effect?
transition-durtaion:1s; The whole animation takes one second to complete.
transition-timing-function:linear; Time curve: linear (uniform)
transition-delay:500ms； Wait for 500 milliseconds to animate again.
combination
transition:transform 1s linear 500ms;
3D
Be careful:
rotateX,rotateZThe direction of rotation is clockwise.
rotateYThe direction of rotation is counter clockwise.
