Tạo một ảnh 3D sử dụng CSS trong Blogger

Tạo một ảnh 3D sử dụng CSS trong Blogger đem đến cho Blog của bạn một phong cách mới, thu hút được người xem. Vì vậy, trong bài viết này tôi sẽ hướng dẫn cách làm hình ảnh lật với hiệu ứng 3D , mà bạn phải thích vì cả hai đều là tốt nhất bởi cái nhìn độc đáo và hiệu suất. Bất cứ khi nào bạn đăng một bài đăng trên / Blog của mình và đưa một bức ảnh vào bài viết, hình ảnh này sẽ thu hút người xem với hiệu ứng lật 3D đẹp mắt .

Tạo ảnh 3D bằng css cho blog

Nhấp vào hình ảnh trên bạn sẽ thấy

Tạo một ảnh 3D sử dụng CSS trong Blogger

1. Đăng nhập vào của bạn Blogger Dashboard >> Template >> Edit HTML

2. Tìm kiếm </ head> trong template, Giữ CTRL + F để tìm nhanh

3. Bây giờ sao chép các đoạn mã dưới đây và dán nó ngay trên 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: 100%; 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>

4. Nhấp vào nút Save để lưu cài đặt

5. Thêm hiệu ứng flipping trong bài viết mỗi khi khởi tạo bài viết. bạn nhớ phải chuyển quan chế độ HTML như hình.

6. Copy và dán đoạn mã sau vào trong bài viết.

<div class="profile-image">
<div class="flip-3d">
<br />
<figure>
<img alt="Mô tả cho hình ảnh" src="Link hình ảnh" />
<figcaption>Tiêu đề bạn tự chọn....</figcaption>
</figure>
</div>
</div>