perspective:用来模拟人的视觉位置，也称为视距即人的眼睛到屏幕（成像）的距离。
perspective：的单位是像素PX.
perspective的值越大，表示视距越远，成像越小，反之。
perspective：写在被观察元素的复合子上。
flat:不开启3D立体空间，默认值，2D平面显示。
preserve-3d:子元素开启3D立体空间。
写在复合子上。
trabsform-style:preserve-3d;
-webkit-transform-style:preserve-3d; 兼容GOOGLE和opera.
-rnoz-transform-style:preserve-3d;兼容火狐
3D
transition:过渡
transform：转换
translate：平移
rotate：旋转
scale：缩放
skew：斜切
3D转换：
translateX: X轴位移
translateY：Y轴位移
translateZ：Z轴位移，只能位移大小，不能位移百分比
translate3D（x,y,z):三个轴线一起位移
rotatex(deg)
rotatey(deg)
rotatez(deg)
rotate3d(1,0
rotate3d(x,y,z,angle):旋转，xyz的值0或1.
1：表示要旋转true；
0：表示不旋转false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D空间</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
position:relative;
perspective:1000px;
}
.bigbox{
width:200px;
height:200px;
border:1px solid red;
margin:300px auto;
transform-style:preserve-3d;/* 让盒子具有3D空间感 */
animation:hz 8s linear infinite;
}
@keyframes hz{
from{
transform:rotate3d(1,1,1,0);
transform-origin:50% 50% -100px;
}
to{
transform:rotate3d(1,1,1,360deg);
transform-origin:50% 50% -100px;
}
}
.bigbox div{
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background: url('img/33.jpg') no-repeat center/100% 100%;
}
.bigbox .box1{
transform:translatey(-100px) rotatex(90deg);
}
.bigbox .box2{
transform:translatey(100px) rotatex(90deg);
}
.bigbox .box3{
transform:translatez(100px);
}
.bigbox .box4{
transform:translatez(-100px);
}
.bigbox .box5{
transform:translatex(-100px) rotatey(90deg);
}
.bigbox .box6{
transform:translatex(100px) rotatey(90deg);
}
</style>
</head>
<body>
<!-- .bigbox: -->
<div class="bigbox">
<!-- .box$*6: -->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">554156656</div>
<div class="box6">646541161</div>
</div>
</body>
</html>
1万+
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
