Thủ thuật css 3d flip box

22/10/2016 02:53 19465

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:

<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>

<p>Front Side</p>

</div>

</div>

Mã css cho hiệu ứng css 3d flip box

.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;
}

.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

<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>