3D透
perspective:用来模拟人类的视觉位置，即人的眼睛到屏幕成像的距离。
perspective:的单位是像素px;
perspective:的值越大，表示视距越远，成像越小，反之；
perspective:写在被观察元素的父盒子上；
transform-style:控制子元素是否开启3D空间效果。flat|preserv e-3d
flat:不开启3D立体空间，默认值。2D平面显示；
preserve-3d:子元素开启3D立体空间；
写在父盒子上！
transform-style:preserve-3d;
-webkit-transform-style:preserve-3b；兼容google和Opera；
-moz-transform-style:preserve-3d;兼容火狐；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
width:100vw;
height:100vh;
/*视距*/
perspective:1000px;
}
div{
position:absolute;
top:50%;
left:50%;
}
.box{
transform:translate(-50%,-50%) rotatex
(45deg);
transform-style:preserve-3d;
width:100px;
height:300px;
background-color:rgba(0,255,0,.3);/*
(255,255,0)*/
}
.box1{
transform:translate(-50%,-50%) rotatey
(72deg);
transform-style:preserve-3d;
width:500px;
height:400px;
background-color:rgba(255,0,0,.3);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
2258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
