Introduction to 2D and 3D conversion knowledge in CSS3

12 D Conversion

Conversion is one of the subversive features in CSS3, can realize the displacement, rotation, deformation, scaling, and even support matrix, with the learning transition and animation knowledge, can replace a large number of previously can only rely on flash to achieve the effect.

1, moving translate (x, y) can change the position of the element, X, y can be negative;

2, scaling scale (x, y) can be horizontal and vertical scaling of elements, X, y values can be decimal, not negative;

4, rotation rotate (deg) can rotate the element, positive value is clockwise, negative value is counterclockwise;

5. Tilt skew (deg, deg) can tilt the element at a certain angle

23 D Conversion

1 , 3D axes

The 3 dimensions of space are represented by X, Y, and Z, and three axes are perpendicular to one another. Such as

2 , left-hand coordinate system

Extend the left hand, let the thumb and forefinger into an "L" shape, thumb right, forefinger upward, middle finger pointing forward. So we set up a left-handed coordinate system, where the thumb, forefinger and middle finger represent the positive direction of the X, Y, and z axes, respectively. Such as

3 , left hand rule

The left hand holds the rotation axis, the thumb pointing to the axis of rotation positive direction is the rest of the finger curl direction.

Three animations

Animation is one of the most disruptive features in CSS3, which can be used to achieve complex animations by setting up multiple nodes to precisely control one or a set of animations.

1 , necessary elements:

A, the animation sequence is specified by @keyframes;

b, the animation sequence is divided into multiple nodes by percent;

C. Define each attribute separately in each node

D, the animation is applied to the corresponding elements through animation;

2 , key attributes

A, Animation-name set the animation sequence name

B, animation-duration animation duration

C, animation-delay animation delay time

D, animation-timing-function animation execution speed, linear, ease, etc.

E, animation-play-state animation playback status, play, paused, etc.

F, animation-direction animation inverse, alternate, etc.

G, Animation-fill-mode Animation after the completion of the state, forwards, backwards, etc.

H, animation-iteration-count animation execution times, inifinate, etc.

Introduction to 2D and 3D conversion knowledge in CSS3