CSS3之创建3D场景

来源：互联网发布：美发预约软件编辑：程序博客网时间：2024/06/04 20:10

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{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

阅读全文

0 0