变换：旋转在 Safari 中不起作用

Question

我想创建一个从前到后旋转的翻转框 - 正面有文字，背面也有文字。问题是即使它旋转，正面和背面的文字都可以一起看到当盒子旋转时。背面的文字首先可见，而不是正面的文字。也许有人知道为什么？在 Chrome 中一切正常。

.box {
   width: 155px;
   height: 125px;
   position: relative;
   display: inline-block;
   padding: 5px;
   line-height: 20px;
}

.box-in {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all .5s;
 }

.box-front {
  background-color: transparent;
  z-index: 1;
  backface-visibility: hidden;
}

.box-back {
  background-color: #F5F5F5;
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  z-index: 1;
  backface-visibility: hidden;
  line-height: 30px;        
}

.box:hover .box-front {
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.box:hover .box-back {
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

HTML 代码：

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="box">
                    <div class="box-in box-front">
                        <div>jQuery</div> <br>
                        <div>Bootstrap</div> <br>
                        <div>RWD</div>
                    </div>
                    <div class="box-in box-back">level: <br> </div>
                </div>  
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="box">
                    <div class="box-in box-front">
                        <div>SASS</div> <br>
                        <div>GULP</div> <br>
                        <div>JavaScript</div>
                    </div>
                    <div class="box-in box-back">level: <br> </div>
                </div>  
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="box">
                    <div class="box-in box-front">
                        <div>AJAX</div> <br>
                        <div>WordPress</div> <br>
                        <div>JSON</div> 
                    </div>
                    <div class="box-in box-back">level: <br> </div>
                </div>  
            </div>
        </div>

Answer 1

在 Safari 10.1.1 中工作时，我收到错误消息，我必须为 backface-visibility 使用 -webkit- 前缀。当您检查元素时（右键单击检查），您可以在浏览器的控制台中看到这一点。 backface-visibility 旁边有一个带感叹号的黄色小三角形，说明了问题所在。

.box-front, .box-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

进行调整使其对我有用。

.box {
  width: 155px;
  height: 125px;
  position: relative;
  display: inline-block;
  padding: 5px;
  line-height: 20px;
}

.box-in {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all .5s;
}

.box-front {
  background-color: transparent;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.box-back {
  background-color: #F5F5F5;
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  line-height: 30px;
}

.box:hover .box-front {
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.box:hover .box-back {
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
  <div class="box">
    <div class="box-in box-front">
      <div>jQuery</div> <br>
      <div>Bootstrap</div> <br>
      <div>RWD</div>
    </div>
    <div class="box-in box-back">level: <br> </div>
  </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
  <div class="box">
    <div class="box-in box-front">
      <div>SASS</div> <br>
      <div>GULP</div> <br>
      <div>JavaScript</div>
    </div>
    <div class="box-in box-back">level: <br> </div>
  </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
  <div class="box">
    <div class="box-in box-front">
      <div>AJAX</div> <br>
      <div>WordPress</div> <br>
      <div>JSON</div>
    </div>
    <div class="box-in box-back">level: <br> </div>
  </div>
</div>