CSS3之创建3D场景

标签：spec   oar   res   net   highlight   views   view   ott   mod   

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场景

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场景

标签：spec   oar   res   net   highlight   views   view   ott   mod   

原文地址：http://www.cnblogs.com/chaofei/p/7688937.html