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 



thiết bị phòng chụp | bán chân đèn flash | bán đèn chụp ngoại cảnh | bán đèn quay phim | bán đèn chụp sản phẩm | remote trigger godox | đèn flash canon speedlite | đèn led chụp hình sản phẩm | bóng đèn flash | túi đựng máy ảnh | phụ kiện máy ảnh | bàn chụp sản phẩm | thiết bị chống rung máy quay phim | máy ép PLASTIC | thang chụp hình | máy chụp hình sản phẩm | máy in ảnh hiti | chân máy ảnh chụp hình | pin sạc máy ảnh | máy đo sáng | tủ chống ẩm máy quay phim | bán đèn flash | đèn flash hylow | Đèn Flash studio | đèn flash Jinbei | đèn flash photon | bộ kít đèn flash Jinbei | bộ kít đèn flash | Chân máy ảnh | setup phòng chụp sản phẩm | softbox | tấm hắt sáng | bán chân đèn studio | dàn treo đèn | chóa đèn tổ ong | phông nền 3d | dù chụp hình | giá treo phông chụp hình | thanh trượt dolly | tay cầm máy quay phim | phông chụp hình 3d | phòng chụp đám cưới |

Leave a Comment