CSS3之創建3D場景
阿新 • • 發佈：2017-10-18
眼睛 pla 500px strong serve blue light tez 垂直
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場景
[html] view plain copy
- <!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.坐標軸的概念
坐標系原點在左上角
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
CSS3之創建3D場景