Hiệu ứng Lật 3D cho Hình ảnh trong Blogger

How to Create a 3D Flip Effect Image in Blogger

1. Thêm CSS vào Blogger

Dán đoạn CSS sau vào trước thẻ </head>

  <style>
.profile-image {
  margin-bottom:20px;
}
div.flip-3d {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
 position: relative;
 transform-style: preserve-3d;
 transition: 1s transform;
 font-size: 1.6rem;
}
div.flip-3d figure img {
 width: 100%;
}
div.flip-3d figure figcaption {
 position: absolute;
width: 105%; height: 50%; top: 0;
 transform: rotateY(.5turn) translateZ(1px);
 background: rgba(255,255,255,0.9);
 text-align: center;
 padding-top: 45%;
 opacity: 0.6;
 transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style> 

2. Cú pháp đăng ảnh khi viết bài

Khi viết bạn nhớ chuyển qua HTML tab và đăng ảnh theo cú pháp sau

 <div class="profile-image">
<div class="flip-3d">
<br />
<figure>
<img alt="Alt Tag cho hình ảnh" src="Link hình ảnh" />
 <figcaption>Chú thích tại đây</figcaption>
 </figure>
 </div>
</div> 

• DEMO

Iris Tips

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by bc/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm