在透视和背景色上有问题
我想实现一个“有趣的”导航到我的网站，与透视和其他东西，但，作为一个初学者，我看砖墙。
我只是想不出什么办法让这条线backface-visibility: hidden;正常工作。
我的目标是：
前线：
回：
下面代码的结果是(在旋转状态下)：
在CodePen上有大量的工作示例代码，我试图找出它，但没有成功。奇怪的事情发生了，但是对象的backface-visibility从来没有得到它的hidden-state。
我使用了一个很好的模板来处理(designmodo.com)，并将其简化为：
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}请看我的钢笔：https://codepen.io/herrbraun/pen/JKroYa (旋转在那里只显示不工作的-一旦它工作，它将是交互式的)
如果有人能注意到到目前为止，我没有看到任何打字或语法错误，但是-是什么使CSS“失败”呢？
回答 2
Stack Overflow用户
发布于 2016-07-19 16:34:59
首先，您有一个语法错误：
.layer-1, layer-2 {应该是
.layer-1, .layer-2 {此外，要使此设置正常工作，需要设置
.poster {
transform-style: preserve-3D;
}因为您在父级和子级中都进行了转换，并且您希望将背景样式转换为两者的组合。您已经在身体上有了这个，但是这个属性不能继承。
你的片段被修正了
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
@keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
} <div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Stack Overflow用户
发布于 2016-07-16 20:10:30
尝试将动画设置为.layer-1和.layer-2，而不是.poster，并将animation-delay of .layer-2设置为-5s
https://stackoverflow.com/questions/38413342
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号