css3 preserve-3d 的理解
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>转换模块-正方体</title>
<style>
* {
margin: 0;
padding: 0;
/*去除默认边距*/
}body,
html {
width: 100%;
height: 100%;
}.wrap3d {
width: 100%;
height: 100%;
position: relative;
/*设置摄像机离目标物体距离 让3D效果看起来更逼真*/
transform: perspective(400px);
-webkit-transform: perspective(400px);
/*设置为3d空间*/
transform-style: preserve-3d;position: relative;
}
.hongmian{
width: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>
ps:补充下 backface-visibility:hidden 代表背景不可见 就是正面的图片 旋转到背景 就看不到了 默认是可见的
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/18897.html