时间戳

首页 > 解决方案 > CSS中有正面可见性选项吗？

javascript - CSS中有正面可见性选项吗？

问题描述

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

旋转环

“背面可见”复选框隐藏/显示背面，是否可以在背面可见而正面隐藏的情况下实现相反的效果？

编辑：
关于第一条评论，我想澄清一下，期望的结果应该是这样的（旋转时前面板被隐藏）：（ 在此处输入图像描述 前面板被照片编辑删除，其余的是 CSS 更改。注意左卡编辑不佳）

标签： javascripthtmlcsscss-transforms

解决方案

不是 100% 确定这是否是您要查找的内容，但如果您根本不使用该backface-visiblity参数，即将其保留为默认的“可见”，并且如果它具有非透明背景，则背面将始终覆盖前端，如果它在 HTML 代码中的 z-index 或顺序是这样设置的。

我下面的代码片段来自我手头的一些旧代码，以防你想知道。按下圆圈下方的按钮可触发转动动画。

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', 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;
  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>

推荐阅读