css3 preserve-3d 的理解
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转换模块-正方体</title>
<style>
* {
margin: 0;
padding: 0;
/*去除默认边距*/
}
body,
html {
100%;
height: 100%;
}
.wrap3d {
100%;
height: 100%;
position: relative;
/*设置摄像机离目标物体距离 让3D效果看起来更逼真*/
transform: perspective(400px);
-webkit-transform: perspective(400px);
/*设置为3d空间*/
transform-style: preserve-3d;
position: relative;
}
.hongmian{
30%;
height:22rem;
position: absolute;
left:30%;
top:2rem;
background: #F00;
transform: rotateX(90deg) translateZ(-20px);
-webkit-transform: rotateX(4deg) translateZ(-20px);
}
</style>
</head>
<body>
<div class="wrap3d">
<div class="hongmian"></div>
</div>
</body>
</html>
</pre>
ps:补充下 backface-visibility:hidden 代表背景不可见 就是正面的图片 旋转到背景 就看不到了 默认是可见的