1.属性介绍
perspective:800 平面距离三维中方框的距离
perspective-origin:50% 50% 表示从平面上哪个位置看三维图 ，相当于是X轴和Y轴，此时表示平面中心
2.transform属性
--translete :位移操作
translateX(X px)
translateY(Y px)
translateZ(Z px)
--rotate：旋转操作
rotateX(X deg)
rotateY(Y deg)
rotateZ(Z deg)
3.设置3D
transform-style:preserve-3d;
4.目前所有浏览器都不支持perspective属性，只有-webkit-支持~
5.简单的3D场景
- <!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{
- 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.坐标轴的概念
坐标系原点在左上角
x轴的正方向是向右
y轴正方向是向下
z轴正方向是从屏幕到人的眼睛(垂直)
比如rotateX(80deg)和rotateX(-80deg)区别就是：从x轴正方向看向物体，80deg就是顺时针旋转了80度，-80deg就是逆时针旋转了80度
7.transform-origin:调整旋转中心
X轴：
left/center/right
Y轴：
top/center/bottom
Z轴：
length px