input license here

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

Thủ thuật này các bạn cũng có thể chuyển nó thành hiệu ứng cho Thumb blog cũng rất đẹp.

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

Tạo hiệu ứng ảnh 3D hoàn toàn bằng CSS

Live Demo

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 trong quá trình thiết kế.
Related Posts
Diệp Quân
Nguyen Manh Cuong is the author and founder of the vmwareplayerfree blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Sticky