Hiệu Ứng Lật Hình Ảnh Trong Bài Viết Cực Đẹp Cho Blogspot

Chào các bạn, mấy ngày nay bí ý tưởng viết bài rồi, nên hôm nay mình sẽ chia sẻ cho các bạn cách thêm hiệu ứng lật hình ảnh cực đẹp cho Blogspot nhé. Không dài dòng nữa, chúng ta bắt đầu thôi!

Bước 1: Các bạn vào Blogger Bố cục Chỉnh sửa HTML.
Bước 2: Các bạn tìm đến thẻ </head> và thêm đoạn code này vào phía trước nó.

<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>

Bước 3: Khi đăng bài, các bạn chuyển sang chế độ HTML và dán đoạn code này vào

<div class="profile-image"><div class="flip-3d"><br /><figure><img alt="Alt Tag cho hình ảnh" src="Link hình ảnh" /><figcaption>Tính Getter Blog</figcaption></figure> </div></div>

Các bạn có thể thay link hình ảnh vào cho phù hợp với Blog của bạn.
Demo các bạn có thể xem tại đây.
Vậy là xong! Chúc các bạn thành công!

Nguồn: Hoan Hihi Blog