Article From:https://www.cnblogs.com/xieyankeai/p/9687329.html

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.

 

 

  

 

     

 

Link of this Article: 9.21 learning notes

Leave a Reply

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