CSS3 3D special effects video data sharing

CSS is Cascading StyleSheet. Using cascading style sheet technology when making web pages can effectively achieve more precise control over the layout, fonts, colors, backgrounds and other effects of the page.

CSS3 is an upgraded version of CSS technology, and CSS3 language development is developing towards modularity. The previous specification was too large and complex as a module, so it was broken down into smaller modules and more new modules were added. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc.

"CSS3 3D Special Effects Video Tutorial" uses the transition attribute, perspective attribute, and transform attribute in CSS3 to create real and usable three-dimensional effects.

##Video playback address:

http://www.php.cn/course/416.html

this Difficulties in video learning

1. Direction of rotation and tilt

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

For rotation transformation, the default is to perform clockwise transformation along the positive direction of the reference axis (determined by the rotation method used, such as: the reference axis of rotateX() is the X axis). Consider the plane surrounded by the black border in the above figure as an element, with the X-axis as the reference axis; at this time, if the element is rotated (+) 30°, the black plane is fixed on the X-axis and the Y-axis is in the positive direction. Lift one side up (just like lifting a wooden board, the lifted wooden board is still in a plane and will not bend like turning a book). The same applies to rotateY(). rotateZ() is equivalent to the rotate() method of 2d transformation, which is to rotate the element clockwise.

rotatex

rotatey

rotatez

For tilt transformation, the X-axis and Y-axis directions are opposite. skewX() tilts the vertical side of the element counterclockwise (that is, to the left), while skewY() tilts the horizontal side of the element clockwise (that is, downward).

skewx

skewy

2. Transformation base point, viewpoint and view distance

By default, the base point of CSS3 transformation is the center point of the element, that is: After transformation (only rotation, tilt and scaling), the coordinates of the element's center point remain unchanged. For example: the initial position of the element coincides with the upper left corner of the screen, and the width and height are both 100px. After rotating 30°, the coordinates of the element's center point are still ( 50,50).

The viewpoint is another base point, which is only used for 3D transformation. To understand perspective, you can use perspective thinking. We should all have an impression of this game - "Two parallel straight lines intersect at infinity." It is originally impossible for straight lines in three-dimensional space to intersect, even at infinity. However, when projected into the human eye, the originally parallel straight lines will continue to approach each other until they intersect at a point due to the "perspective" phenomenon.

However, the viewpoint is not the intersection of the lines. The viewpoint in the above picture is actually on the outermost surface of the plane, that is, on the surface where the middle cube rushes toward the outside of the screen. The viewpoint principle of CSS is the same. It just simulates what the human eye can see when it is at a certain position. That is, it can be like a cube at different positions in the picture above. When the human eye is at the "viewpoint", it will Presenting different surfaces for people to see, viewpoint is an attribute used to simulate this three-dimensional presentation of elements.

Another attribute that has to be mentioned is the sight distance. As the name suggests, viewing distance is the distance of an object from the viewpoint. According to the principle of "perspective", objects will appear large in the near and small in the far. When the element is close enough and large enough to block the human eye, people cannot see other things; when the element is far enough, it will appear very bright. Small, even invisible. The perspective attribute needs to be "eaten" in conjunction with the translateZ() method, setting perspective for the parent element, and at the same time, applying the translateZ() method to the child element, that is: the parent element is used to simulate the position of the human eye, and the child element is the object you want to see. When the translateZ() method is not applied to the child element, it is equivalent to translateZ(0), and the element displays its original size; the closer the translation distance is to the viewing distance (not exceeding), the larger the element appears; otherwise, the smaller it appears; and When the translation distance exceeds the viewing distance, the element disappears, which is equivalent to the object running behind the human eye and naturally invisible. The working principle of perspective is to use the original size set by the element as the size of the element at the viewing distance. Therefore, the element will become larger by a translation (+) distance; the element will become smaller by a translation (-) distance, but it must be Valid only when sight distance is set.

In addition, as shown in the perspective view above, objects in different positions will look different. In CSS, to achieve this effect, you can set the view distance for the parent element and then apply transformations to multiple child elements.

The above is the detailed content of CSS3 3D special effects video data sharing. For more information, please follow other related articles on the PHP Chinese website!