1. Introduction to Properties
Distance of perspective:800 plane distance from three-dimensional Chinese frame
perspective-origin:50% 50% indicates where the three-dimensional graph is viewed from the plane, equivalent to the x-axis and y-axis, which represents the center of the plane
2.transform Properties
--translete: Displacement operation
TranslateX (X px)
Translatey (Y px)
Translatez (Z px)
--rotate: Rotation operation
Rotatex (X deg)
Rotatey (Y deg)
Rotatez (Z deg)
3. Set 3D
transform-style:preserve-3d;
4. All browsers currently do not support perspective properties, only-webkit-support ~
5. Simple 3D Scene
[HTML]View PlainCopy
- <! DOCTYPE HTML>
- <html>
- <head>
- <title></title>
- <style type="Text/css">
- $a \
- -webkit-perspective:800;
- -webkit-perspective-origin:50% 50%;
- -webkit-transform-style:-webkit-preserve-3d;
- }
- %b=
- width:500px;
- height:500px;
- Background:blue;
- margin:0 Auto;
- -webkit-transform:rotatey (45DEG);
- }
- </style>
- </head>
- <body>
- <div id="a">
- <div id="B">
- </div>
- </div>
- </body>
- </html>
6. The concept of an axis
Coordinate system origin in upper-left corner
The positive direction of the x-axis is right
Y-Axis positive direction is down
Z-axis Positive direction is from the screen to the human eye (vertical)
For example Rotatex (80deg) and Rotatex ( -80deg) difference is: from the x-axis positive direction to the object, 80deg is clockwise rotation of 80 degrees, -80deg is counterclockwise rotation of 80 degrees
7.transform-origin: Adjusting the center of rotation
X-axis:
Left/center/right
Y-Axis:
Top/center/bottom
Z Axis:
Length px
Create a 3D scene from the CSS3