css flip horizontal

 

 

마우스 오버시 수직으로 flip 되는

아주아주 간단한 css소스 입니다.

 

 

HTML

<div class="content">
  <div class="circle">
    <div class="front">
      <span>FRONT</span>
    </div>

    <div class="back">
      <span>BACK</span>
    </div>
  </div>
</div>

CSS

.content{
  width:500px; height:100vh; background:#333; margin:0 auto;
}

.circle{
  position:absolute; top:50%; left:50%; 
  transform:translate(-50%,-50%);
  width:300px; height:300px;
  perspective: 600px;
}

.circle .front, .circle .back{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  backface-visibility: hidden;
  border-radius:50px; 
  color:#fff; transition:.5s;
}
.circle .front{
  background:blue; transform: rotateY(0deg);
}
.circle .back{
  background:green; transform: rotateY(-180deg);
}
.circle:hover .front{
  transform: rotateY(180deg);
}
.circle:hover .back{
  transform: rotateY(0deg);
}

.circle span{
  position:absolute; top:50%; left:50%; 
  transform:translate(-50%,-50%);
  font-size:30px;
}