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

Question

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 code:

            <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中工作时，出现错误，我必须使用-webkit-前缀backface-visibility。检查元素（右键单击检查）时，可以在浏览器的控制台中看到此内容。旁边有一个带有感叹号的黄色小三角形，它backface-visibility说明了问题所在。

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

进行调整使其对我有用。

.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);
}