我想在我的网站上实现一个“有趣的”导航，包括透视图和其他东西，但是，作为初学者，我看着一堵砖墙。
我只是找不到让 backface-visibility: hidden; 行正常工作的方法。
我的目标是:
正面:
后退:
下面代码的结果是(旋转状态):
CodePen 上有很多可用的示例代码，我试图弄明白但没有成功。奇怪的事情发生了，但是对象的 backface-visibility 从来没有得到它的 hidden 状态。
我在 (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
(旋转只是为了显示不起作用的blackface-visibility——一旦它起作用，它将是交互式的)
如果有人能看到我到目前为止的内容，我没有看到任何拼写错误或语法错误，但是 – 是什么让 CSS“失败”？
最佳答案
首先，你有一个语法错误:
.layer-1, layer-2 {
应该是
.layer-1, .layer-2 {
此外，要使此设置生效，您需要设置
.poster {
transform-style: preserve-3D;
}
因为您在父项和子项中都进行了转换，并且您希望获得两者组合的背面样式。您已经在 body 上设置了此属性，但此属性不会继承。
您的代码片段已更正
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>关于css - 透视和背面可见性有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38413342/