CSS back-visibility

CSS back-visibility

by learnscratchsg

HTML

<div id="card" class="flipped">
  <div class="face" id="front">
  front
  </div>
   <div class="back" id="back">
  back
  </div>
</div>

CSS

#card,
#front,
#back {
  width: 200px;
  height: 200px;
  color: #fff;
  text-align: center;
  line-height: 200px;
  
}

#card {
  margin: 2em auto;
  font-size: 2em;
  position: relative;
   -webkit-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
  
}
#front {
    position: absolute;
    background: red;
}
#back {
    position: absolute;
    background: blue;
    
  -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.flipped {
  
  -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.face  {
  
   -webkit-backface-visibility: hidden;
       -ms-backface-visibility: hidden;
           backface-visibility: hidden;
  
}