Hiệu ứng ảnh 3D hoàn toàn bằng CSS cực đẹp cho blogspot
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.
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-…
