CSS3 three-dimensional deformation realizes cubic block

This article mainly introduces the CSS3 use three-dimensional deformation to achieve three-dimensional blocks of the method, the text gives a complete example code, interested friends can run their own look at the effect, only their own hands to better study, the following to see together.

Objective

Three-dimensional transformations use the same properties based on two-dimensional transformations, and if you are familiar with the two-dimensional transformations, you find that the 3D deformation function is similar to the 2D transform. 3D deformation and 2D deformation of the biggest difference is that its reference axis is different, 2D deformation of the axis is flat, only the x-axis and y-axis, and 3D deformation of the axis is x, Y, z three axis composed of three-dimensional space, the x-axis is facing the right, Y Zhou Zheng is facing down, z-axis is facing the screen.

Static as follows:

Instance Code

<! DOCTYPE html>

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!