CSS3_02

1. Transformation attribute: transform: value: transform-function (conversion function);

2. Transformation origin: the center of the default element; change the transformation origin: transform-origin: value: number/percentage/keyword;

3. 2D transformation: Attribute: transform: Value: ① Displacement: translate Positive move down;); ② Scale: scale (value)/scale (x, y)/scale X (x)/scale Y (y); (* scaling function, 0~1 to reduce, >1 to enlarge;); ③ Rotation: rotate (n deg); (* n is clockwise, the coordinate axis changes after rotation;); ④ Tilt: skew (x deg, y deg)/skew X (x deg)/skew Y (y deg);

4. The parent attribute of 3D conversion: perspective: value: px; (* The distance from the human eye to the projection plane, acting on the parent element and space element, so that the child element obtains a 3D perspective effect;);

5. 3D transformation: Attribute: transform: Value: ①3D rotation: a. rotate X (x deg)/rotate Y (y deg)/rotate Z (z deg); b. rotate3d (x, y, z, n deg); (* x, y, z values ​​0 or 1;); ② 3D displacement: translate Z (z)/translate3d (x, y, z); ③ 3D display: transform-style: value: a, flat ( Default, 2D shape;); b. preserve-3d (convert to 3D element state;) (* used for space elements);

6. Transition: ① Transition property: transition-property: Value: property (css property name, multiple commas separated;); ② Transition time: transition-duration: Value: s/ms; ③ Transition time speed curve function ：transition-timing-function: Values: a, ease (default, slow, fast;); b, linear (uniform speed;); c, ease-in (slow, fast;); d, ease-out (fast, slow;); e. ease-in-out (slowly fast slowly;); ④ Transition delay time: transition-delay: value: s/ms; ⑤ Abbreviation: transition: property duration timing-function delay;

7. Animation: ①Declare animation: @keyframes name { 0%{status of animation start}...50%{}...100%{status of animation end}} (* Compatibility: @-webkit-keyframes name{ }); ② Call animation: a. Call animation name attribute: animation-name:; b. Animation execution duration attribute: animation-duration:; c. Animation speed time curve function: animation-timing-function:; d. Animation delay :animation-delay:; Number of animation playbacks: animation-iteration-count: Value: numerical value/infinite (infinite times); e. Animation playback direction: animation-direction: Value: normal (forward)/reverse (reverse) /alternate (odd, positive, even inverse); ③ Animation synthesis: animation: name duration timing-function delay iteration-count direction; ④ Fill status before and after animation playback: animation-fill-mode: Value: none/forwards (keep last after completion One state)/backwards (the delay time remains in the first state)/both; ⑤Animation play state: animation-play-state: value: paused (pause)/running (play);