2D and 3D Conversion of CSS3

3D conversion involves the knowledge of mathematics, as a graduate of the mathematics profession, does not study not to be sorry own profession?

Let's start with a few parameters:

1, Transform-origin:origin (origin, starting point), also namely the beginning of deformation, in mathematics can be understood as the origin of coordinates.

Its syntax is:transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | cen ter | Bottom]] <length>?

The description for the normal language is:

/* Set only the syntax for a value */
Transform-origin:x-offset
Transform-origin:offset-keyword
/* Set syntax for two values */
Transform-origin:x-offset Y-offset
Transform-origin:y-offset X-offset-keyword
Transform-origin:x-offset-keyword Y-offset
Transform-origin:x-offset-keyword Y-offset-keyword
Transform-origin:y-offset-keyword X-offset-keyword
/* Set syntax for three values */
Transform-origin:x-offset Y-offset Z-offset
Transform-origin:y-offset X-offset-keyword Z-offset
Transform-origin:x-offset-keyword Y-offset Z-offset
Transform-origin:x-offset-keyword Y-offset-keyword Z-offset
Transform-origin:y-offset-keyword X-offset-keyword Z-offset

The Transform-origin property value can be a specific value such as percent, EM, px, or a keyword such as top, right, bottom, left, and center. The default value is 50%,50%,0.

• X-offset: The offset used to set transform-origin the x-axis of the horizontal direction, which can be used <length> and values, as well as <percentage> a positive value (the right offset from the center point along the horizontal x-axis), or a negative value (the left offset from the center point along the horizontal x-axis).
• Offset-keyword: is a keyword in,,,, or, which top right bottom left center can be used to set transform-origin the offset.
• Y-offset: Used to set the offset of the transform-origin property in the vertical y-axis, you can use the <length> and value, and it can be <percentage> positive (the offset from the center point perpendicular to the y-axis) or negative (the offset from the center point along the vertical y-axis).
• X-offset-keyword: Yes left , right or center a keyword in that can be used to set the transform-origin offset of the property value at the horizontal x-axis.
• Y-offset-keyword: Is top bottom center a keyword in or, which can be used to set the transform-origin offset of the property value in the vertical y-axis.
• Z-offset: Used to set the distance from the user's eye point in the 3D deformation, the transform-origin default value z=0 , which can be taken <length> , but <percentage> not here.

The Transform-origin property value can be a specific value such as percent, EM, px, or a keyword such as top, right, bottom, left, and center. The default value is 50%,50%,0.

2. Transform-style: Specifies how nested elements are rendered in 3D space.

There are two attribute values: flat andpreserve-3d。其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

If a value is set on an element transform-style flat , all child elements of that element are flattened into the 2D plane of the element for rendering. Rotating the element along the x-axis or y-axis causes the child elements at the positive or negative z-axis position to appear on the plane of the element, not before or after it. If the value set for an element transform-style is preserve-3d , it means that no flattening operation is performed, and all of his child elements are in 3D space. The transform-style property needs to be set in the parent element, and above any nested deform elements.

That is transform-style , the value isflat时，其子元素并不会受到rotateX等的影响，而是直接与父元素叠加在一起，和父元素处于同一平面上。当值为preserve-3d时，子元素与父元素分离，受单独的属性控制。

It is important to note that if your element is set to a 了transform-style value preserve-3d , you cannot set the value to prevent the child element from spilling over the container overflow hidden , if you set the overflow:hidden same can force the child element to appear on the same plane (and the element transform-style is set to flat The same effect).

3, Perspective: The most important attribute for 3D transformation, meaning for perspective, perspective.

The artistic expression of three-dimensional objects is depicted on the two-d plane by using the principle of visual illusion that the line and polygon tend to converge.

Perspective: A transparent plumb-face K is established between man and building as a projection plane, and a figure, called a perspective, or perspective projection, that intersects the projection surface by the human eye (cast Ray) through the projection surface. Drawing based on the principle of perspective, it is used in mechanical engineering and construction engineering.

Perspective: Because we can see everything in nature because of the light, the process is that the light shines on the object and the light is reflected into the retina of our eyes through the water crystals of the eyeball to form the image, we call the light in the eye of the lens of the refraction of the focal point of the crystal focus, the image of the retina is called the picture. It's just that the human brain transforms the upside-down image into a positive image through its own functional processing. If we assume a plane or a transparent plane in front of us to intercept the light reflected by the object into the eyeball, we will get an image consistent with the object, the hypothetical plane, which is the picture we usually draw.

Related terms:

base plane	The horizontal plane where the body is located, denoted by the letter G. The base plane is equivalent to the horizontal projection surface h in the three projection surface system.
screen	the plane in which the perspective is located, usually the plumb face, denoted by the letter p. You can also use the tilt plane to do the picture.
Baseline	the intersection of the base plane and the screen, denoted by the letter Gl.
viewpoint	where the viewer's eye is located, denoted by the letter S.
site	the position where the viewer stood, that is, the positive projection on the base plane of the viewpoint s, denoted by E.
center point	the positive projection of the viewpoint s on the screen, denoted by the letter VC.
Main line of sight	perpendicular to screen p sight Span class= "font5" > see point S and center point VC straight line sight
view plane	point S.

Can be divided into a point of perspective, two-point perspective, three-point perspective.

The above describes the perspective of the relevant knowledge, and now the beginning is the point.

The Perspective property sets the viewer's location, maps the visual content to a frustum, and then throws it onto a 2D view plane. If you do not specify a perspective, all points in the z-axis space are tiled into the same 2D view plane, and the depth of field concept does not exist in the transform results.

We can simply understand the distance between the user and the element 3D space Z plane. And its effect is determined by his value, the lower the value, the user and 3D space z plane distance closer, the visual effect is more impressive; conversely, the greater the value, the farther the user is from the Z-plane of the 3D space, the less visual effect.

In 3D transformations, for some variants, perspective properties are essential for viewing the effect of deformation.

　　perspectiveThe property includes two properties: none and a length value that has a unit. perspectivethe default value of the property is none that it represents an infinite angle of 3D object, but it looks flat. Another value <length> accepts a value with a length unit greater than 0. and its unit cannot be a percent value. The larger the <length> value, the farther the angle appears, creating a fairly low intensity and a very small 3D space change. Conversely, the smaller the value, the closer the angle appears, creating a high-intensity angle and a large 3D change.

You stand 10 feet and 1000 feet, for example, looking at a 10-foot cube. At 10 feet, you are the same size as the cube. So the perspective shift is far greater than standing at 1000 feet, and the stereo size is 1% of your distance from the cube. The same thinking applies to perspective the <length> values.

Based on the above introduction, we can perspective make a simple conclusion to the value:

• Perspective the value is None or not set, there is no true 3D space.
• The smaller the perspective value, the more obvious the 3D effect is, and the closer your eyes are to true 3D.
• The value of perspective is infinitely large, or 0 o'clock is the same as the value of none.

In order to better understand the perspective attributes, it is necessary for us to combine him with translateZ the relationship. In fact, you can perspective simply understand the value of the human eye to the distance of the display, and translate that is 3D object distance from the source point, the following reference W3cplus a diagram to explain perspective translateZ the relationship.

Displays the perspective attribute and translateZ the position scale. To the top of the graph, Z is half a D, in order to use the original circle (outline) appears on the z axis (dashed circle), the solid circle on the canvas will expand two, such as a light blue circle. As shown in the bottom figure, the circle is scaled down, causing the dashed circle to appear behind the canvas, and the z size is one-third from the original position.

Perspective is a parent element that sets the distance between the human eye and the parent element, which can be understood as the projection of the child element, the canvas where the parent element is a child element. Translatez is to set the distance between the child elements and the canvas.

In 3D transformations, perspective perspective() 3D space can also be activated in a 3D-deformed function in addition to a property that activates a 3D space. They are different: used on perspective stage elements (the common parent element of the deformed elements), is used on the perspective() current Morph element, and can be used with other transform functions.

Although perspective properties and perspective() functions are the same, their values and the pair of applications are different:

• perspectiveproperty can be value none or length value, and perspective() function value can only be greater than 0, if the value is 0 or less than 0, you will not be able to activate 3D space;
• perspectiveproperties are used to deform pairs like parent elements perspective() , whereas functions are used for deforming pairs like themselves and for transform use with other functions.

4, Perspective-origin:

Another important attribute in 3D transformations, primarily used to determine perspective the source point angle of a property. It actually sets the x-axis and y-axis position, where the viewer seems to be watching the element's child elements.

perspective-origin:[< Percentage> | <length> | left | center | right | Top | Bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | span class= "tag" ><length> | top | center | bottom]] 　

The default value for this property is "50% 50%" (that is, center), which can also be set to a value or to a value of two length.

• The first length value specifies a position relative to the x-axis of the element's containing box. It can be a length value (expressed in supported length units), a percentage, or one of the following three keywords: left (denotes 0 of the length of the x-axis of the containing box), center (representing the middle point), or right (representing 100% of the length).
• The second length value specifies a position relative to the y-axis of the element's containing box. It can be either a length value, a percentage, or one of the following three keywords: top (denotes 0 of the length of the y-axis of the containing box), center (representing the middle point), or bottom (representing the length of 100%).

Note that in order to refer to the depth of transformation of a child element, the perspective-origin attribute must be defined on the parent element. Usually the perspective-origin property itself does nothing, it must be defined on the perspective element that sets the property. In other words, perspective-origin attributes need to perspective be used in conjunction with attributes to move the viewpoint to a location outside the center of the element.

Often we look at the same things can not always be in the central position to see, want to change the angle, change a position to see exactly, this time can not leave perspective-origin this attribute, the following from the website of the map can be simple exposition this view:

The following example shows the effect of the modified perspective-origin property value on the cube:

Introduces so many complex attributes, and introduces a simple resting stop.

5, Backface-visibility

A very simple attribute, visible | Hidden two values are optional, equivalent to whether to make the element transparent, transparent when the visible, when you go to the back, you can also see the content, the content is reversed. Hidden is neither visible.

The visibility of an element is determined by the following with "Backface-visibility:hidden":

• Elements render the context in a 3D environment, which is calculated based on the 3D deformation matrix, whereas the element is not rendered in a 3D environment and is calculated based on the 2D deformation matrix.
• If the component's matrix is negative in the 3rd row and 3 columns, then the opposite side of the element is hidden, whereas the other is visible.

In simple terms, backface-visibility properties can be used to hide the back of the content. By default, the back is visible, which means that even after flipping, the rotated content is still visible. When backface-visibility set to hidden , however, the content is hidden when rotated, because the front face is no longer visible after rotation. This feature helps you to simulate faceted objects, and you can easily make sure that only the front is visible.

The above content is transferred from: http://www.w3cplus.com/css3/transform-basic-property.html.

2D and 3D Conversion of CSS3