CSS3 2d conversion 3d conversion and knowledge point summarization of animations

CSS3 2d Conversion

2d Conversion Method:

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

Properties of the 2d transformation:

• Transform
• Transform-origin

Usage:

For example:

Div {transform: rotate (30deg); -ms-transform: rotate (30deg)/** */-webkit-transform:  Rotate (30deg)/**}

More difficult to understand part of the analysis

The move rule of the 2d conversion is similar to the relative positioning, where the original position of the element has been occupied by him no matter where it is moved.

Skew Tilt

Usage: Transform:skew (30deg) or Transform:skew (30deg, 30deg);

The parameter represents the tilt angle, unit deg

• A parameter: Indicates the horizontal direction of the tilt angle;
• Two parameters: The first parameter represents the horizontal direction of the tilt angle, the second parameter represents the vertical direction of the tilt angle.

On the calculation of skew tilt angle is not so intuitive on the surface, here is a reference to a Danale drawing example to illustrate:

The first thing to note is the default origin of skew Transform-origin is the center point of this object

Look at the picture:

Transform-origin Datum Point

When you use the Transform method to deform a text or an image, the center point of the element is the datum point. Using the Transform-origin property, you can change the datum point of the deformation.

Usage: transform-origin:10px 10px;

A total of two parameters, representing the distance from the origin of the upper left corner, the unit px, the first parameter is relative to the upper left corner of the horizontal direction of the distance, the second parameter is relative to the upper left corner of the vertical direction of the distance;

Two parameters can be set to a specific pixel value, where the first parameter can be specified as left, center, right, and the second parameter can be specified as top, center, bottom.

CSS3 3d Conversion

For an in-depth understanding of the 3d conversion principle, refer to Zhang Xin Asahi CSS3 3d Conversion

First, there's a 3d map in your head.

Matrix3D (N,n,n,n,n,n,
N,n,n,n,n,n,n,n,n,n) defines a 3D conversion, using a 4x4 matrix of 16 values.
Translate3d (x, y, z) defines 3D conversions.
TranslateX (x) defines 3D conversions, using only the values used for the x-axis.
Translatey (y) defines 3D conversions, using only the values used for the y-axis.
Translatez (z) defines 3D conversions, using only the values used for the z-axis.
Scale3d (x, y, z) defines a 3D scaling transformation.
ScaleX (x) defines a 3D scaling transformation by giving the value of an x-axis.
ScaleY (y) defines a 3D scaling transformation by giving the value of a y-axis.
Scalez (z) defines a 3D scaling transformation by giving the value of a z-axis.
Rotate3d (x,y,z,angle) defines 3D rotation.
Rotatex (angle) defines a 3D rotation along the X-axis.
Rotatey (angle) defines a 3D rotation along the Y-axis.
Rotatez (angle) defines a 3D rotation along the Z-axis.
Perspective (N) defines a perspective view of the 3D transformation element.

Essential Perspective Properties

If you say rotateX / rotateY / rotateZ can help understand the three-dimensional coordinates, then you translateZ can help you understand the perspective position.

We all know that the principle of near and far is small, and the rotateX function of the element that is not as well rotateY translateZ is to let the element be in its immediate or near or far. Let's say we set the element perspective to 201 pixels, as follows:

perspective:201px;

Its child elements, the smaller the translateZ value, the smaller the child element size (because the element goes away, our eyes will be smaller); the larger the value, the larger the element is, and translateZ when the translateZ value is very close to 201 pixels, but not more than 201 pixels (such as 200 pixels), The size of the element will fill the entire screen (if the parent element does not have a overflow:hidden-like limit). Because of this time, the child element just moved to the front of your eyes, so-called "Isian, do not see Tarzan", that is the case. When the translateZ value becomes larger, more than 201 pixels, the element is invisible-it's good to understand: we can't see what's behind the eyes!

Reference blog Zhang Xin Asahi css3 3d Conversion

Understanding Perspective-origin

perspective-originThis property is very well understood and represents the position of your double-eyed eyes. The default is the center of the stage or element you are looking at . Sometimes, we are not interested in the location of the center, we hope that the line of sight in some other places. Say:

Here is a perspective of the actual application of the cube:

perspective-origin:25% 75%;

Transform-style:preserve-3d

To achieve the 3d effect, this property is required

Backface-visibility:hidden (the back is invisible) or visible (the back is visible)

In the show world, we can't go through soft sister A to see the soft sister behind it B or C or D; However, in the CSS3 3D world, by default, we are able to see the elements behind

So, to be realistic, we often set this up so that later elements are not visible:

Backface-visibility:hidden;

Example Rookie Tutorial

Finally look at a 3d conversion example: Picture of the Carousel effect demo

CSS3 Excessive

Refer to the Novice tutorial CSS3 excessive because there is no particularly difficult to understand things so no longer tidy

CSS3 Animation

Refer to the rookie tutorial CSS3 animation because there is no particularly difficult to understand things so no longer tidy

Reference articles

Zhang Xin Xu Good, CSS3 3D transform transform, that's it!

CSS3 2d conversion 3d conversion and knowledge point summarization of animations