透视和背面可见性有问题答案

【问题标题】：Having trouble with perspective and backface-visibility透视和背面可见性有问题
【发布时间】：2016-11-19 16:20:52
【问题描述】：

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

我只是找不到让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 （旋转只是为了显示不工作的blackface-visibility——一旦工作，它将是交互式的）

如果有人能看到我到目前为止所得到的东西，我看不到任何拼写错误或语法错误，但是 - 是什么让 CSS “失败”？

【问题讨论】：

向我们提供您尝试过的代码，并告诉我们它没有做什么您想要它。向我们展示您的努力，只有这样我们才能帮助您。虽然您确实提供了 codepen，但您还应该提供能够重现您的问题的准系统 sn-p，而不仅仅是发布链接。此外，您应该更好地解释问题到底是什么，因为我发现这里很难解读实际问题。
您到底想要什么？精确
也许 w3schools 的这个演示可以帮助您了解背面可见性的作用w3schools.com/cssref/trycss3_backface_inuse.htm 如果您旋转一个元素，您将看到该元素的边互换了，或者您什么也看不到（背面可见性：隐藏）
是的。我知道并想使用它。（我的目标是制作一张“卡片”，有正面和背面。背面是transform:rotateY(180deg);，这样当卡片转动/旋转时，实际上会显示背面不是镜像的正面，而是背面。

标签： css css-transforms perspective

【解决方案1】：

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

.layer-1, layer-2 {

应该是

.layer-1, .layer-2 {

此外，要使此设置生效，您需要设置

.poster {
    transform-style: preserve-3D;
}

因为您在父项和子项中都有变换，并且您希望将背面样式设置为两者的组合。你已经在 body 上有了这个，但是这个属性没有继承。

您的 sn-p 已更正

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>

【讨论】：

你好瓦尔斯！我刚从5天假期回来。您的更正（transform-style: preserve-3D是完美的。现在我将进入下一个级别，使其具有交互性:-)！我希望我不需要为此回来......非常感谢，大卫
很高兴它有帮助:-)

【解决方案2】：

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

【讨论】：

感谢您这么快回复。刚去试了，不行。（见link）
值得注意的是：我在.poster 中删除了一个额外的<div，并且当将backface-visibilty 应用到.poster 时，它完全隐藏了适得其反的效果...
好的，我现在明白你的问题了，我想我知道如何解决它了
嗯。 Chrome 现在只显示背面，而 safari 变得疯狂（有点混合在“仅限正面”和“显示海报但没有孩子”之间 -> 见问题的顶部
完全适合我：Demo