CSS3 3D Special effects video data sharing

CSS is a cascading style sheet (cascading StyleSheet). The use of cascading style sheets in web pages makes it possible to effectively control the layout, font, color, background and other effects of the page.

CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity. The previous specification was too large and complex to be a module, so it was broken down into smaller modules, and more new modules were added. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effect, multi-column layout, etc.

The CSS3 3D special Effects Video tutorial creates a truly usable three-dimensional effect through the transition attribute, perspective attribute, and transform attribute in the CSS3.

Video playback address: http://www.php.cn/course/416.html

This video learning difficulties

One, the direction of rotation and tilt

For rotation and tilt changes, the most important is their default transformation direction.

For a rotation transformation, the default is the clockwise transformation along the positive direction of the datum axis (as determined by the rotation method used, such as the Rotatex () datum axis is the x-axis). Consider a plane surrounded by a black border as an element, with an x-axis as the Datum axis, at which point the element is rotated (+) 30°, that is, the black plane is fixed on the x-axis, and the y-axis is on the side of the positive direction (like lifting a piece of wood, the raised plank is still in a plane, but not Rotatey () in the same vein. Rotatez () is equivalent to the 2d transformation of the Rotate () method, which rotates the element clockwise.

Rotatex

Rotatey

Rotatez

For skew transformations, the x-axis and y-axis are in the opposite direction. SKEWX () tilts the vertical edge of an element counterclockwise (that is, to the left), while Skewy () tilts the horizontal edge of the element clockwise (that is, downward).

Skewx

Skewy

Transformation base point, viewpoint and distance of sight

By default, the base point of the CSS3 transformation is the center of the element, that is, after the transformation (rotation, skew, and scale only), the coordinates of the element's center point remain the same, for example: the initial position of the element coincides with the upper-left corner of the screen, the width height is 100px, and the center point coordinates of the element are

A viewpoint is another base point that is used only for 3d transformations. Understanding viewpoints can be aided by perspective thinking. We should all have an impression of this--"two parallel lines intersect at infinity." The lines in three-dimensional space are not originally possible to intersect, but also in the infinity distance, but projected into the human eye, the original parallel lines because of the phenomenon of "perspective", will continue to close to each other until the point of intersection.

However, the viewpoint is not the intersection point of the line, in fact, in the plane of the outermost, that is, in the middle of the cube rushed to the surface outside the screen. CSS's viewpoint principle is the same, but is to simulate the human eye in a certain position, can see the element at that time, that is, can be like in different positions of the cube, in the human eye in the "viewpoint", will present different surfaces to see, the viewpoint is used to simulate this three-dimensional element rendering of a property.

Another attribute that has to be said is the distance. As the name implies, sight is the distance of the object from the viewpoint. According to the "perspective" principle, the object will appear near large and small characteristics, when the element is close enough and large enough to block the human eye, people can not see other things, when the element is far enough, it will show very small, even invisible. The perspective property needs to be "edible" with the Translatez () method, setting the perspective for the parent element, and applying the Translatez () method to the child element, namely: The parent element is used to mimic the human eye position, and the child element is the object you want to see. When the Translatez () method is applied to a child element, it is equivalent to Translatez (0), the element shows its original size, the closer the distance to the horizon (no more), the more the element is rendered, and the smaller the element disappears when the translation distance exceeds the range of sight. The equivalent of the object ran to the rear of the human eye, nature will not see. Perspective works by setting the original size of the element as the size of the element at the sight distance, so the distance of the translation (+), the element becomes larger, the distance of the translation (-), the element can be smaller, but it must be set to the point of view in the case only valid.

In addition, as shown in the perspective above, objects of different positions will appear differently. In CSS, to achieve this effect, you can set the visual range for the parent element and then apply the transformation to multiple child elements.