Mời anh chị xem video:
[view_video_youtube url_video=”https://www.youtube.com/watch?v=BWDIp0rxIgc” title_video=”Thủ thuật css 3d flip box”]
Link tải code: http://bit.ly/2eCTVqb
Mã html cho hiệu ứng css 3d flip box:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="hover panel"> <div class="front"> <div class="box1"> <p>Front Side</p> </div> </div> <div class="back"> <div class="box2"> <p>Back Side</p> </div> </div> </div> |
Mã css cho hiệu ứng css 3d flip box
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
.panel { margin: 0 auto; height: 130px; position: relative; -webkit-perspective: 600px; -moz-perspective: 600px; } .panel .front, .panel .back { text-align: center; } .panel .front { height: inherit; position: absolute; top: 0; z-index: 900; text-align: center; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel .back { height: inherit; position: absolute; top: 0; z-index: 1000; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .panel.flip .back { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); } .box1{ background-color: #14bcc8; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .box2{ background-color: #ff7e70; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } |
Mã js
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ // set up hover panels // although this can be done without JavaScript, we've attached these events // because it causes the hover to be triggered when the element is tapped on a touch device $('.hover').hover(function(){ $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); }); }); </script> |
Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net
Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress