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 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-的{{1}}前缀。当您检查元素时，您可以在浏览器的控制台中看到这一点（右键单击inspect）。 backface-visibility旁边有一个带有感叹号的小黄色三角形，可以解释问题。

backface-visibility

进行调整使它对我有用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: