Hiệu Ứng Lật Thẻ 3D Cho Blogspot

Tiếp tục những bài viết về Blogger, thì hôm nay mình sẽ hưỡng dẫn các bạn tạo hiệu ứng lật thẻ 3D cho blogspot.

CSS

.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.card{
  cursor: pointer;
  width: 340px;
  height: 480px;
}
.front,.back{
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: transform .6s linear;
}
.front img{
  height: 100%;
}
.front{
  transform: perspective(600px) rotateY(0deg);
}
.back{
  background: #f1f1f1;
  transform: perspective(600px) rotateY(180deg);
}
.back-content{
  color: #2c3e50;
  text-align: center;
  width: 100%;
}
.sm{
  margin: 20px 0;
}
.sm a{
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  color: #2c3e50;
  font-size: 18px;
  transition: 0.4s;
  border-radius: 50%
}
.sm a:hover{
  background: #2c3e50;
  color: white;
}
.card:hover > .front{
  transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back{
  transform: perspective(600px) rotateY(0deg);
}

CODE

<div class="card middle">
      <div class="front">
        <img src="img.jpg" alt="">
      </div>
      <div class="back">
        <div class="back-content middle">
          <h2>DarkCode</h2>
          <span>Youtube Channel</span>
          <div class="sm">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
    </div>