SHARE HIỆU HỨNG HOVER ẢNH 3D

SHARE HIỆU HỨNG HOVER ẢNH 3D

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 .
tự mà thêm đi thèn trẫu
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

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Khải Nguyễn Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
nhận xét
73 nhận xét

Bình luận

73 nhận xét:

  1. Như bo tròn viền ấy nhĩ :s

    Trả lờiXóa
  2. Kí tên : trần nhật sinh

    Trả lờiXóa
  3. đc á :V lâu lâu nhớ ghé thăm tui nha :(

    Trả lờiXóa
  4. bạn đổi liên kết cho mình thành http://www.nguyendienblog.ooo/ nha! xin lỗi vì sự bất tiện

    Trả lờiXóa
  5. Xin liên kết.
    tên hiển thị: Đoàn Anh Huy
    Url: https://www.huy2k5.tk/
    đã đặt liên kết, tương tác tốt, lâu dài
    Sorry không thấy chỗ đặt liên kết nên cmt đại :v

    Trả lờiXóa
  6. Temp như vồn
    Sinh dz vãi cứt

    Trả lờiXóa
  7. VÀO ĐÂY TAO NÓI NÀY DUY

    "Bây h tao vào học r nên ko onl thường xuyên đc, tao giao chức quản trị lại cho mày, thay tao phát huy nhen. Cảm ơn mày

    À thông báo vs các blog liên kết hộ hộ tao với"

    Phúc said

    Trả lờiXóa
  8. mình là đệ nhất tương tác chym bự

    Trả lờiXóa
  9. thông báo!! Thứ 6 Quốc Bảo Blog sẽ lọc liên kết đấy ạ :V

    Trả lờiXóa
  10. Xin lỗi nha, mình off blog 1 time ạ :(

    Trả lờiXóa
  11. Xin chào bạn,Lúc mình trỏ domain mới về blogpot có một số vấn đề phát sinh phiền bạn sửa url liên kết giúp sửa thành nguyenphublog.blogspot.com
    Xin lỗi đã làm phiền

    Trả lờiXóa
  12. thằng này vì gái mà bỏ blog ae ạ :(

    Trả lờiXóa
    Trả lời
    1. no, do thằng quý quậy nát blog rồi nên t mới bỏ

      Xóa