为什么 transform-style: preserve-3d；不起效果

在练习下面的3D转换时，正常效果本来应该是下面这样的

鼠标碰到他后，会翻转过来 ，背面在上，变成下面这样

 但是小编在练习的时候去出现了另一种情况

不知道会不会有人和小编一样在练习CSS3的3D转换时，也会遇到这样的问题，就是transform-style: preserve-3d;没有起到效果，

就类似下面的效果

翻转过来是这样的

这就让小编百思不得其解，为什么会这样呢？

原来是因为小编忘记加backface-visibility: hidden;（背面隐藏）这个属性了

 我们主要是用背面隐藏backface-visibility: hidden;这个属性，来实现盒子的翻转的

首先在body中放一个大盒子，然后在大盒子里面放两个小盒子，当然两个小盒子也可以是图片哦

<div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">pink老师等你</div>
    </div>

 下面设置box的尺寸和两个小盒子一致,由于小盒子需要脱离文档流(absolute),box要relative;
子绝父相 

.box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            transform-style: preserve-3d;
        }

设置两个小盒子相同的样式,使用绝对定位(position: absolute),设置动画过渡transition 

.front,
.back {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       font-size: 30px;
       color: #fff;
       text-align: center;
       line-height: 300px;
}

由于两个小盒子的背景颜色不一样需要分开设置，还要将第一个小盒子设置z-index: 1;就是在平面的前面一层，使第一个小盒子在上面，然后使用背面隐藏(backface-visibility: hidden;) 让第二个小盒子实现隐藏，最后将第二个小盒子设置transform: rotateY(180deg);，使其翻转180度，到后面再次翻转的时候字就会是正的啦

.front {
            background-color: pink;
            z-index: 1;
            backface-visibility: hidden;
        }
        
        .back {
            background-color: purple;
            transform: rotateY(180deg);
        }

然后使用伪类 :hover鼠标经过使盒子时翻转180° 

.box:hover {
            transform: rotateY(180deg);
        }

这就是背面隐藏的所实现的两面翻转啦