Question

我想实施一个有趣的＆＃34;导航到我的网站，透视和东西，但作为一个初学者，我看一个砖墙。

我只是找不到让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＆＃34;失败＆＃34;？< / p>

Answer 1

尝试将动画设置为<h:message for="selectedMenu" style="color:red" id="msgSelectedMenu1" rendered="${foo.message1}" /> <h:message for="selectedMenu" style="color:green" id="msgSelectedMenu2" rendered="${foo.message2}" /> public void foo(){ if (condition 1) { FacesMessage msg = new FacesMessage(); setMessage("Error_Message_1"); message1 = true; message2 = false; throw new ValidatorException(msg); } }和.layer-1而不是.layer-2，并将.poster的{{1}}设置为animation-delay

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>

透视和背面可见性有问题

HTML

CSS

2 个答案: