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.
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>
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ị.
Tạo hiệu ứng ảnh 3D hoàn toàn bằng CSS
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>
0 Nhận xét
Đăng nhận xét