CSS中是否有frontface-visibility选项？

问题描述

这里是CSS / JS初学者，我正在遵循webkit 3d-transforms指南，并尝试为环旋转部分应用隐藏的正面选项：

“背面可见”复选框隐藏/显示背面，可以在背面可见且正面隐藏的情况下实施相反的操作吗？

修改：
关于第一个评论，我想澄清一下，期望的结果应该看起来像这样（旋转时前平面是隐藏的）：

（前面板已通过照片编辑删除，其余都是CSS更改。请注意编辑不佳的左卡）

解决方法

不能100％确定这是否是您要查找的内容，但是如果根本不使用backface-visiblity参数，即，将其保留为默认值“ visible”，并且该参数不透明如果以这种方式设置了z-index或HTML代码中的顺序，则背面将始终覆盖正面。

下面的代码段来自于我手头的一些旧代码，以防万一。按下圆圈下方的按钮以触发转弯动画。

function turn1() {
  $('#front').css({transform: 'rotateY(180deg)'});
  $('#back').css({transform: 'rotateY(360deg)'}).delay(2000).promise().then(turn2);
};
function turn2() {
  $('#front').css({transform: 'rotateY(0deg)'}); 
  $('#back').css({transform: 'rotateY(180deg)'}).delay(2000).promise().then(turn1); 
};


$('#go').on('click',turn1);

.wrapper {
  position: relative;
  margin: 20px auto;
  width: 180px; 
  height: 180px;
  font-size: 36px;
  perspective: 150px;
}
#front,#back {
  position: absolute;
  width: 100%; 
  height: 100%;
  border-radius: 50%;
  transition: transform 2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
#front { 
  background: green; 
}
#back { 
  background: yellow; 
  transform: rotateY(180deg);
}

.x {
  text-align: center;
} 
button {
  padding: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="front">Front</div>
  <div id="back">Back</div>
</div>
<div class="x"><button id="go">Press to rotate</button></div>

如果将backface-visibility: hidden添加到原本不变的代码中，则旋转时会看到两面：

function turn1() {
  $('#front').css({transform: 'rotateY(180deg)'});
  $('#back').css({transform: 'rotateY(360deg)'}).delay(2000).promise().then(turn2);
};
function turn2() {
  $('#front').css({transform: 'rotateY(0deg)'}); 
  $('#back').css({transform: 'rotateY(180deg)'}).delay(2000).promise().then(turn1); 
};


$('#go').on('click',#back {
  position: absolute;
  width: 100%; 
  height: 100%;
  border-radius: 50%;
  transition: transform 2s;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
}
#front { 
  background: green; 
}
#back { 
  background: yellow; 
  transform: rotateY(180deg);
}

.x {
  text-align: center;
} 
button {
  padding: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="front">Front</div>
  <div id="back">Back</div>
</div>
<div class="x"><button id="go">Press to rotate</button></div>