问题描述
今天用CSS3写3d页面练手，发现了使用opacity的问题，给大家避个坑
html文件
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
css文件
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@keyframes rot {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
body {
perspective: 1000px;
}
.box {
// 3d效果盒子的父盒子加透明会导致子盒子3d立体空间不起效
opacity: 0.7;
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: rot 5s linear infinite;
}
.box div {
position: absolute;
width: 200px;
height: 200px;
}
.box div:nth-child(1) {
background-color: aqua;
}
.box div:nth-child(2) {
transform: rotateX(45deg);
background-color: pink;
}
下图为.box盒子加入opacity属性时子盒子无3d效果
下图为.box盒子去掉opacity属性时子盒子有3d效果
解决方法：把opacity注释掉即可