cssのtransform

transform-style:この要素のサブ要素が3 D空間内にあるか、それとも自身の2 D空間にあるかを定義します.flat|preserve-3 d(ここで親要素を反転操作した場合、transform-styleがpreserve-3 dの場合、サブ要素も反転します.そうしないとサブ要素に影響しません)
backface-visibility:visible|hidden定義要素の裏面が見えるかどうか(3 d変換に対応)perspective:none|観察者距離z=0平面の距離を指定し、要素とその内容に透視変換を適用する(画面をz=0平面、すなわち観察者距離画面の距離と想像する)
次はカード反転効果のコードです.

     

      

        hello, this is front
      
      

        this is the back
      
    
 

.container {
  perspective: 1000;
}

.container, .front, .back {
  width: 200px;
  height: 160px;
} 

.flipper {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;     /*important*/
}
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  background-color: green;
  backface-visibility: hidden;  /*important*/
}

.front {
  z-index: 9
}

.back {
  transform: rotateY(180deg)
}

.container:hover .flipper {
  transform: rotateY(180deg)
}