转换：旋转在Safari中不起作用 [英] Transform: rotate doesn't work in Safari

问题描述

我想创建一个从正面到背面旋转的翻页盒-正面有一个文本，背面也有一个问题，问题是即使它旋转了，正面和背面的两个文本也可以一起看到当盒子旋转时。最初显示的是背面的文字，而不是正面的文字。也许有人知道为什么？

I want to create a flipbox which rotate from front to back - on the front side there is a text and also on the back side.The problem is that even though it rotates, both texts from front and back side are visible together when the box rotates. And the text from the back side is visible at first instead the text from the front side. Maybe someone has an idea why? Everything is working without problems in 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>

推荐答案

在Safari 10.1.1中工作，我必须对背面可见性使用 -webkit-前缀的错误。检查元素（右键单击检查）时，可以在浏览器的控制台中看到此内容。在背面可见性旁边有一个带有感叹号的黄色三角形，可以解释问题。

Working in Safari 10.1.1, I am given the error that I must use the -webkit- prefix for backface-visibility. You can see this in the browser's console, when you inspect an element (right-click inspect). There is a little yellow triangle with an exclamation point next to it next to backface-visibility that explains the problem.

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

进行此调整使其对我有用。

Making that adjustment makes it work for me.

.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>

这篇关于转换：旋转在Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！