透视和背面可见性有问题

Question

我想在我的网站中实现 "funny" 导航，包括透视图和其他东西，但是，作为初学者，我看的是一堵砖墙。

我只是找不到让线路 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 "fail"？

Answer 1

尝试将动画设置为 .layer-1 和 .layer-2 而不是 .poster 并将 .layer-2 的 animation-delay 设置为 -5s

Answer 2

首先，你有一个语法错误：

.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>

透视和背面可见性有问题

Having trouble with perspective and backface-visibility

css

perspective

css-transforms

HTML

CSS