Code hiệu ứng 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 .

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKYh3GbsJjjU8PNcHOFSTnG4CHA0sd4Di0_vFbzR0AgE2lrjHLMHSEgR5YklfDXf7-qor2j2z9oM3cgfGTirCClslQFGYMlPHXX_gDW05a5csY45MYK77BzRLY1tXKgBXjRow4ds3jcU/s1600/6e9544bf6ead67e84cef991078b3e787.jpg) no-repeat center center;background-size:cover'></a>                 </div></div>

Done