CSS3 depth of field and three-dimensional transformation properties and the concrete realization method of rotating three-dimensional cube (graphic)

Last week, I wrote a simple 2D transformation.

Write a 3D transformation today.
Three-dimensional effects I think it's the most interesting place in CSS3.
Have to admire the developers of the great Gods
So we can get a cool visual experience with a few lines of CSS code.

Browser coordinate system

Before you speak formal grammar, you need to understand the browser coordinate system first
This requires us to think of the browser interface as a stereoscopic scene.

This is a wide range of web browser coordinate system picture
Left-to-right direction is the positive direction of the x-axis of the browser
The direction from top to bottom is the positive direction of the Y axis of the browser
and the z-axis is in the right direction, facing our
It's important to understand this because we need to use it to understand the rotation of the element below.

3D rotation

The rotation we use in the plane is simply to make the element rotate at a certain angle in the plane.
A little more complicated in three-dimensional rotation.
Attributes, of course, with our transform.
The three-dimensional rotation has the following three functions corresponding to the rotation of three dimensions respectively

• Rotatex (XXDEG)

• Rotatey (XXDEG)

• Rotatez (XXDEG)

Rotatex is to rotate the element around the x-axis, the greater the angle, the element rotates clockwise around the x-axis
Similar to our horizontal bar movement

Transform:rotatex (45DEG);

Rotatey is to rotate the element around the y-axis, the greater the angle, the element rotates clockwise around the y-axis
Similar to the steel pole dance movement.

Transform:rotatey (45DEG);

Rotatez is to rotate the element around the z axis, the larger the angle, the element rotates clockwise around the z axis
This is our rotation in the two-dimensional plane, similar to the turntable

Transform:rotatez (45DEG);

In fact, 3D rotation also has a synthetic function is Rotate3d (NUM,NUM,NUM,DEG)
Don't use a lot, I'll just say it briefly.
parameter is not what we want. 3 Angle values
But three numbers, one angle value.
The first three numbers represent the vector values rotated around the x, y, and z axes, respectively.
The last one represents the rotation angle of the space, the equivalence relation is as follows

Rotate3d (1,0,0,xxdeg) <==> Rotatex (xxdeg) Rotate3d (0,1,0,xxdeg) <==> Rotatey (xxdeg) Rotate3d (0,0,1,xxdeg ) <==> Rotatez (xxdeg)

3D Displacement and 3D scaling

We use Translatex () and Translatey () in the 2D to move in the plane
We have more Translatez in 3D. () allows us to pan along the z-axis
You can also use the synthetic function Translate3d (x, Y, z)
Note the first two values can be expressed as percentages, but values that are translated along the z-axis can only use length values

In the same vein, our 3D scaling
ScaleX (num), ScaleY (num), Scalez (num), Scale3d (Num,num,num)
As for their usage, let's go through the example below.
(The Tilt property of 3D does not exist, in other words, there is no skew3d function)

Perspective/Depth of field properties perspective

The term "depth of field" is what Wikipedia explains.

Depth of field (English: Depth of field, DOF) depth of field refers to the camera's relatively clear imaging range before and after the focus. In optics, especially video or photography, is a range of distances that can be clearly imaged in space. Although the lens can only gather light to a fixed distance, away from this point will gradually blur, but at a certain distance, the degree of blurred image is invisible to the naked eye, this distance is called depth of field. When the focus is on the super-focal length, the depth of field extends from half of the focal length to infinity, which is the maximum depth of field for a fixed aperture value.

(see here, my hand silently left the keyboard, to the end of the sigh, thought, this is exactly what kind of academic qualifications to understand)
We can understand that.
The depth of field is our visual distance from the monitor.
The greater the depth of field, the farther away the element is, the less effective it is.
In our CSS3, perspective is used to activate a 3D space
Attribute value is the depth of field (default none without depth of field)
There are two ways to use

. stage {    perspective:500px;}

Elements that apply depth of field are called "stage elements"
All descendant elements of the stage element will be affected
(If the perspective attribute is also added to the descendant element, the effect is superimposed instead of overwritten)

	




<pclass="stage">

    <pclass="demo"></p></p>

	

.stage 

{    

width: 200px;    

height: 200px;    

border: 1px solid black;    

margin: 100px auto;}

.stage 

.demo 

{    

width: 200px;    

height: 200px;    

background-color: orangered;    

transform: rotateX(45deg);}

In this example, we rotate the inner element around the x-axis after 45°
Since he was just spinning in two times, so we couldn't see it spinning
But let's add a depth of field now.

.stage {    

width: 200px;    

height: 200px;    

border: 1px solid black;    

margin: 100px auto;    

perspective: 500px; /*增*/}.stage 

.demo {    

width: 200px;    

height: 200px;    

background-color: orangered;    

transform: rotateX(45deg);}

This is equivalent to looking in the center of the stage element, which is 500px from our naked eye.
Because of the clockwise rotation of the child elements,
The upper part of the element is far from us, so it looks small.
The lower part of the element is closer to us, so it looks slightly larger
This will create a strong sense of the three-dimensional

Just now, I said, our naked eye is the center of the stage element.
In fact, the position of this "eye" can be adjusted.
This uses the Perspective-origin property.
The default property value is 50% 50%
Which is the central position of the stage element.
We can try to adjust the angle of view

.stage {    

width: 200px;    

height: 200px;    

border: 1px solid black;    

margin: 100px auto;    

perspective: 500px;    

perspective-origin: 10px 10px; /*增*/}.stage 

.demo {    

width: 200px;    

height: 200px;    

background-color: orangered;    

transform: rotateX(45deg);}

This is equivalent to 10px,10px the position of the stage element from the origin (upper left).
Understanding this requires a certain amount of space.

Note: The depth of field must be bigger than your animated element (we can't see what's behind the eye)

Another use of depth of field is to apply a function that is deformed in an animated element (not a stage element)
And the other Morph functions are written together

. Stage. demo {    ...    Transform:rotatex (45deg) Perspective (100px);}

3D attribute Transform-style

This property specifies how child elements are displayed in space.
Only two attribute values: Flat (default) and preserve-3d
Flat indicates that all child elements are rendered on a 2D plane
Preserve-3d indicates that all child elements are rendered on a 3D plane
(Prederve is the meaning of protection, maintenance, preserve-3d is to maintain the meaning of three-dimensional space)
Of course, if we want the effect of 3D, we need to usetransform-style: preserve-3d;

This property is only for setting the child element of a property element how to show
and the child element of the child element is not valid
And for the setoverflow: hidden;element, setting the 3D effect will be invalidated.
The reason is simple, out of the parent element plane of the child elements can not be displayed, the result is natural or 2D effect
The elements that apply to this attribute are called "containers".
This attribute we are following an example to understand

Back Visible Property Backface-visibility

With this element we can specify whether the element is visible when it is back to us
Only two attribute values visibility (default) and hidden
If we want the element to be invisible to us
Set it up like this

. demo {    ...    Backface-visibility:hidden;}

Let me take a look at the properties described above in the following example.

Example: Rotated three-dimensional cube

<p class="stage"> <!--stage elements, where the perspective is -->

     <ul class="three-d-box"> <!--Animation container, through which to control the entire cube -->

         <li>♑</li> <!--Animated elements, six faces of the cube -->

         <li>♍</li>

         <li>♌</li>

         <li>♋</li>

         <li>♎</li>

         <li>♓</li>

     </ul></p>

Ul { / * Adjust the style of the ul label, cancel the padding, margins, and "dot" style * /

    Padding: 0; margin: 0; list-style-type: none;}.stage { /*Set the stage element to be centered on the screen, set the appropriate depth of field */

    Position: relative; width: 800px; height: 800px; margin: 100px auto; perspective: 800px;}@keyframes move { /*Set animation keyframes*/

    0% { transform: rotateX(0deg); }

    25% { transform: rotateX(180deg); }

    50% { transform: rotateX(360deg) rotateY(0deg); }

    75% { transform: rotateX(360deg) rotateY(180deg); }

    100% { transform: rotateX(360deg) rotateY(360deg); }}.stage .three-d-box { /* The animation container is centered in the middle of the stage element*/

    Width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -100px; transform-style: preserve-3d; /*Set 3D properties to let child elements render in 3D space */

    Animation: move 3s linear infinite; /* set animation */}.stage .three-d-box>li { /* set animation child element public property */

    Position: absolute; width: 200px; height: 200px; left: 0; top: 0; font-size: 50px; line-height: 200px; text-align: center; opacity: 0.5;}/* To ensure that we are on the cube For position control, we need to make the animation container in the middle of the cube */.stage .three-d-box>li:nth-child(1) { background-color: red; transform: translateZ(-100px);}. Stage .three-d-box>li:nth-child(2) { background-color: greenyellow; transform: translateZ(100px);}.stage .three-d-box>li:nth-child(3) { background -color: cornflowerblue; transform: rotateX(90deg) translateZ(100px);}.stage .three-d-box>li:nth-child(4) { background-color: orangered; transform: rotateX(-90deg) translateZ( 100px);}.stage .three-d-box>li:nth-child(5) { background-color: deeppink; transform: rotateY(90deg) translateZ(100px);}.stage .three-d-box>li :nth-child(6) { background-color: lightcoral; transform: rotateY(-90deg) translateZ(100px);} 

Done
So we get the following cool three-dimensional cube

Note that in the 3D transform transform, the rotation is different from the order of the displacement function, and the position of the element is different.
This is because the axis of the element changes as we transform it.

If the above code is not clear, you can copy to the browser for debugging
The whole idea is

1. Set stage elements (PERSPECTIVE:XXXPX)

2. Set animation container (transform-style:preserve-3d)

3. Adjust the position of the animated child elements by rotation and displacement

4. Apply animation effects to animation containers

Finally, we use this cube to deepen the understanding of three-dimensional transformation-related properties.
Backface-visibility
Add a cube before the style

Now let's add the style.

. stage. Three-d-box>li {    ...    Backface-visibility:hidden;}

Let's get some fault.
We can see all the elements that are back to us, all invisible.
That'sbackface-visibility: hidden;the effect.

There are also some properties for rotation, scaling, and panning I'm not testing here anymore.
You can open the console and see for yourself that the usage in 2D is similar