Tạo hiệu ứng ảnh 3D hoàn toàn bằng CSS cực đẹp cho blogspot

Bài viết liên quan:

Đã lâu rồi chưa viết thủ thuật Blogspot, hôm nay hướng dẫn đến các bạn một thủ thuật Tạo hiệu ứng ảnh 3D hoàn toàn bằng CSS cực đẹp cho blogspot. Đây là thủ thuật được làm hoàn toàn bằng CSS nên không ảnh hưởng gì đến tốc độ load nha. Thủ thuật này các bạn cũng có thể chuyển nó thành hiệu ứng cho Thumb post-outer cũng rất đẹp.

Tạo hiệu ứng ảnh 3D hoàn toàn bằng CSS cực đẹp cho blogspot

Bước 1: các bạn chèn đoạn css sau phía trên thẻ ]]></b:skin>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#hieu-ung {
    background: #ddd;
    background: linear-gradient(#ddd, #e8e8e8);
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    margin:0;
}
.hieu-ung {
    width: 400px;
    height: 300px;
    margin: 70px auto;
    perspective: 1000px;
}
.hieu-ung a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("https://d13yacurqjgara.cloudfront.net/users/269311/screenshots/1508393/the_optimist_lives_on_by_huanle-d6yprp1_o_1x.jpg");
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 0.5s;
}
.hieu-ung:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom;
}
.hieu-ung a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.hieu-ung a span {
    color: white;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px "Open Sans";
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1;
}
.hieu-ung a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: bottom;
}
.hieu-ung:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}
Bước 2: Các bạn chèn đoạn code hiện thị sau ở nơi mà bạn muốn hiển thị.
<div class="hieu-ung">
  <a href="#">
    <span>Hiệu ứng lật ảnh 3D cực đẹp</span>
  </a>
</div>

Kết luận

Vậy là khá đơn giản để Tạo hiệu ứng ảnh 3D hoàn toàn bằng CSS cực đẹp cho blogspot đúng không nào! Hy vọng thủ thuật sẽ giúp ích được cho các bạn.
Đừng quên để lại 1 like và 1 comment để ủng hộ mình nhé!

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. cái này nên áp dụng cho ảnh trong bài viết hay j nhỉ . e định cho nó làm thum mà thấy ko hợp

    Trả lờiXóa
    Trả lời
    1. Thumb temp của em mà hợp chỗ nào, tào lao :v

      Xóa
    2. ủa khách hàng là thượng đế. thái độ j vại =•=

      Xóa
  2. haha, niệm đang edit lại cái thông báo chỗ răng cưa :D

    Trả lờiXóa
    Trả lời
    1. Vẫn còn lorem.... kìa ông, ông chưa edit thông báo à

      Xóa
    2. Để vậy chứ chưa biết ghi cái gì vào :v

      Xóa
  3. Klq nhưng button demo chất vãi :v

    Trả lờiXóa
    Trả lời
    1. Mấy cái button bây h nhìu lắm, tìm mãi mới đc cái này ý :)

      Xóa
  4. Tem Niệm edit lại đẹp đấy. Share cho Hùng với được ko?

    Trả lờiXóa
  5. Ơ chống chuột phải rồi này @@

    Trả lờiXóa
    Trả lời
    1. Chuột phải làm cái gì nào?

      Xóa
    2. Nó dùng làm nhiều thứ lắm, mở và sao chép link ảnh nữa, nhiều ng muốn bật nhiều bài xem cùng 1 lúc phải chuột phải mở tab mới.... nếu 1 khi nó đã muốn ăn cắp thì k tránh đc đâu. chống chuột phải bất tiện lắm, thật ấy.

      Xóa
    3. tui cũng cảm thấy bất tiện nữa nè :v

      Xóa
    4. Ừ mà k hiểu t edit temp xóa mất cái gì đó đi hay chèn code bị sao đó mà có lúc bấm chữ trả lời mãi k đc và phải f5 mấy lần -_-

      Xóa
  6. a Niệm. cái happy new year chưa res kìa a. nó dài lòng thòng

    Trả lờiXóa
  7. Nút demo ông sửa lại rồi à, nhìn chuyên nghiệp thế

    Trả lờiXóa
  8. bước 2 em muốn chèn zô ảnh của bài viết thì làm sao anh

    Trả lờiXóa