实现3D翻转背面出现不透明的方式

实现3D效果的翻转动画时候 可以通过“backface-visibility: hidden;”这个属性加在翻转盒子时候被背面不想显示的内容身上，实现背面此内容不可见的效果。而做动画的时候需要transform-style: preserve-3d; 放置做动画的盒子身上才能有效果！所以这两个元素一般一起使用

HTML结构如下：

<div class="cube c1">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>

    <div class="cube c2">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>

然后样式结构为：

      .cube {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 50px;
             /*需要有这个属性实现3d动画*/
            transform-style: preserve-3d;
            animation: rotate 5s infinite;
        }

        .c2>div {
            /* 这个属性可以隐藏背后的文字    transform-style: preserve-3d;*/
            backface-visibility: hidden;
        }

 

 然后就会使背面文字不可显示,实现上述效果  还可以来做翻书背面不显示字，图片翻转不一样的图片等....小案例