Chào mừng các bạn đã đến với thanh hấp blog.Mình là diện-ctv của thanh hấp blog.Hôm na mình xin chia sẻ cho anh em một hiệu ứng hover ảnh 3d chất mà mình đã view source được ở một blog .
Demo
Cách làm rất đơn giản =)) bạn chỉ cần thêm đợn css này trước thẻ ]]></b:skin>
.hover-3d {
position:relative;
float: none;
margin: 0 auto;
clear: both;
height: 250px;
width: 215px;
max-width: 100%;
object-fit: cover;
-webkit-perspective:600px;
-moz-perspective:600px;
perspective:600px;
}
.hover-3d .thumb-ndblog {
width: 100%;
height: 250px;
object-fit: cover;
position: relative;
display: block;
}
.hover-3d a {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
border-radius: 5px;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important;
box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
}
.hover-3d a:before {
content: "\f02d";
font-family: FontAwesome;
line-height: 32px;
width: 32px;
height: 32px;
font-size: 18px;
color: #fff;
text-align: center;
font-weight: 400;
position: absolute;
top: 45%;
left: 45%;
opacity:0;
padding: 0;
z-index:1;
border: 2px solid #fff;
border-radius: 50%;
transition: all 0.25s ease-in-out 0s;
}
.hover-3d a:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
left: 0;
background:#d86843;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease-in-out 0s;
}
.hover-3d:hover.hover-3d .thumb-ndblog {
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
-o-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.bk-left {
display: block;
overflow: hidden;
top: 7px;
height: 95%;
-webkit-transform: rotate3d(0,1,0,-90deg);
transform: rotate3d(0,1,0,-90deg);
position: absolute!important;
width: 40px;
left: -11px;
background-color: #222;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bk-left h2 {
font-size: 35px;
line-height: 40px;
padding-right: 10px;
text-align: right;
position: absolute;
top: 10%;
bottom: auto;
height: 70px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(90deg) translateY(-40px);
color: #fff;
transform: rotate(90deg) translateY(-40px);
margin: 0;
padding: 0;
width: auto;
}
.hover-3d:hover .bk-left {
-webkit-transform: rotateY(-45deg);
-o-transform: rotateY(45deg);
transform: rotateY(-45deg);
top: -15px;
height: 112%;
}
.hover-3d:hover.hover-3d a:after {
opacity: 0.8;
visibility:visible;
}
.hover-3d:hover.hover-3d a:before {
opacity: 1;
visibility:visible;
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
Tiếp theo, bạn chỉ cần thêm đoạn code dưới vào nơi cần hiển thị
</style>
<div class='hover-3d'>
<div class='bk-left'></div>
<div class='thumb-ndblog'>
<a href='https://www.facebook.com/I.Am.LTD.Pro.1' style='background:url(https://1.bp.blogspot.com/-xbeyx2E7InM/W25VBt6GyuI/AAAAAAAAAro/Sa7duLlYookNQcAo2b2vMdfT52yR4d_IgCLcBGAs/s1600/6e9544bf6ead67e84cef991078b3e787.jpg) no-repeat center center;background-size:cover'></a>
</div></div>
Done
0 Bình luận:
Đăng nhận xét