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>坐标系原点在左上角
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
扫一扫
2889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
