On the transition and animation method of CSS3 conversion 2d,3d

Summarize:

Observer distance Perspective: Specify distances, must have pixel units px
[Observer Perspective Perspective-origin: normal Default center]


Conversion Transform contains:rotate, translate,scale,matrix,perspective

Child element 3D effect transform-style : preserve-3d | Flat

[Object Transform-origin is typically centered by default]

[Element back backface-visibility: Generally visible by default]

element Rotation Direction rotate:x-axis left hand rule y-axis right-hand rule

Transitions transition contains : Property duration ease delay

Animation:

1. Create a rule:

@keyframes rule name x {

From: {...}

20%: {...}

50%: {...}

75%: {...}

To: {...}

}

2. Rules of Use:

div{

Animation: rule name x Duration Ease delay infinite reverse;

}

This article from the "front-end Development Study Notes" blog, declined reprint!

On the transition and animation method of CSS3 conversion 2d,3d