backface-visibility 屬性定義當元素不面向屏幕時是否可見。

如果在旋轉元素不希望看到其背面時，該屬性很有用。

backface-visibility: visible|hidden;
下面這個示例效果：
visible和hidden的對比

     <div>
        <div class="box1">我是正面</div>
        <div class="box2">我是反面</div>
    </div>

      .box1{
        width: 300px;
        height
 
: 300px;
        background: rgb(196, 22, 22);
        border-radius: 50%;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        position: relative;
        z-index: 1;
        animation: turn 2s infinite;
        backface-visibility: hidden;
      }
     .box2{
        width
 
: 300px;
        height: 300px;
        background: rgb(13, 231, 67);
        border-radius: 50%;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
      @keyframes turn {
          from{
              transform
 
: rotateY(0deg);
          }
          to{
              transform: rotateY(360deg);
          }
      }

CSS3 backface-visibility 不面向屏幕是否可見