Blog Mã nguồn 

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

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.

HTML Tab

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>

Như vậy là đã xong…chúc các bạn thành công 



Bạn chưa tìm được link tải phần mềm này vui lòng click here  để vào trang tổng hợp phần mềm đẩy đủ nhất của chúng tôi !

Leave a Comment