Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the three-dimensional conversion function of css3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The 3D conversion functions are: matrix3d (), translate3d (), translateX (), translateY (), translateZ (), scale3d (), scaleX (), scaleY (), scaleZ (), rotateX () and so on.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The Transform attribute is applied to the 2D or 3D transformation of an element.

Functions that implement 3D conversion with Transform attributes:

Function description matrix3d (n _ n

) define 3D transformations, using 16-valued 4x4 matrices. Translate3d (XMagneyMagnez) defines 3D conversion. TranslateX (x) defines the 3D conversion, using only the values used for the X axis. TranslateY (y) defines the 3D conversion, using only the values used for the Y axis. TranslateZ (z) defines the 3D conversion, using only the values used for the Z axis. Scale3d defines 3D scaling transformations. ScaleX (x) defines a 3D scaling transformation, given an X-axis value. ScaleY (y) defines a 3D scaling transformation, given a value of the Y axis. ScaleZ (z) defines a 3D scaling transformation, given the value of a Z axis. Rotate3d (XMagneyMagnez.Angle) defines 3D rotation. RotateX (angle) defines 3D rotation along the X axis. RotateY (angle) defines 3D rotation along the Y axis. RotateZ (angle) defines 3D rotation along the Z axis. Perspective (n) defines a perspective view of a 3D transformation element. CSS3 3D conversion

3D transformations use the same attributes based on 2D transformations. If you are familiar with 2D transformations, you will find that the function of 3D transformations is quite similar to that of 2D transformations. 3D transformation in CSS3 mainly includes the following functions:

3D displacement: 3D displacement in CSS3 mainly includes two functional functions: translateZ () and translate3d ().

3D rotation: 3D rotation in CSS3 mainly includes four functions: rotateX (), rotateY (), rotateZ () and rotate3d ().

3D scaling: 3D scaling in CSS3 mainly includes two functional functions: scaleZ () and scale3d ().

3D matrix: there is a 3D matrix function matrix3d () in 3D deformation in CSS3 as well as in 2D deformation.

1.3D displacement

In CSS3, 3D displacement mainly includes two functions: translateZ () and translate3d (). The translate3d () function makes an element move in three-dimensional space. This deformation is characterized by the use of the coordinates of a three-dimensional vector to define how much the element moves in each direction.

With the increase of px, the intuitive effect is:

X: move from left to right

Y: move from top to bottom

Z: make it bigger with the center of the box as the origin

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.