CSS) 변환 예제 - 카드 뒤집기

1) 변환 예제 - 카드 뒤집기

 

<div class="cards">
  <div class="card">
    <div class="face face-front">
      <img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">
    </div>
    <div class="face face-back">
      <img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML5">
    </div>
  </div>
</div>

.cards {
  
}
.card {
  width: 150px;
  height: 220px;
  position: relative;
  perspective: 600px;
}
.card .face {
  width: 150px;
  height: 220px;
  border: 1px solid lightgray;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 2s;
  position: absolute;
  backface-visibility: hidden;
}
.card .face-front {
  background: url("https://heropy.blog/css/images/pattern.png");
  transform: rotateY(0deg);
}
.card:hover .face-front {
  transform: rotateY(-180deg);
}
.card .face-back {
  transform: rotateY(180deg);
}
.card:hover .face-back {
  transform: rotateY(0deg);
}
.card .face-front img {
  width: 90px;
  filter: grayscale();
  opacity: .7;
  
}
.card .face-back img {
  height: 120px;
}

 

 

예제 시연 영상