Bài đăng ngày: 7/23/2015 09:46:00 PM
Blogminhvan
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 .
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.
6. Copy và dán đoạn mã sau vào trong bài viết.
<div class="profile-image">Như vậy là đã xong...chúc các bạn thành công
<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>
Chia sẻ Kiến thức - Thủ thuật - Kinh nghiệm mà tôi đã học được từ nhiều nguồn khác nhau cho bạn. Hy vọng với kiến thức đã chọn lọc, nhỏ bé này sẽ giúp ích cho bạn. Hãy thường xuyên ghé thăm Blog Minh Văn để cùng tôi trải nghiệm, khám phá những kiến thức mới và đừng quên chia sẻ kiến thức này cho bạn bè của bạn. Thank you!
