Mẫu 3D Cube Banner cực cool với CSS3 và jQuery

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu banner với hiệu ứng rất mềm mại và đủ sức để tạo ấn tượng với khách hàng. Với mẫu này, các bạn có thể áp dụng để tạo quảng cáo cho website hay blog của mình.

3d, banner, css3, jQuery, thu thuat css, css co ban

 Download

HTML

Đầu tiên, chúng ta sẽ tạo khung chuẩn html như sau :

<div class="cube-wrap example1">

<div id="cube" class="cube">

<div class="cube-front">

            <a href="#">

            <img class="step1-img1" src="images/step1-img1.png" alt="" />

            <img class="step1-img2" src="images/step1-img2.png" alt="" />

            </a>

</div>

<div class="cube-back">

            <a href="#">

            <img class="step3-img1" src="images/step3-img1.png" alt="" />

            <img class="step3-img2" src="images/step3-img2.png" alt="" />   

            </a>

 </div>



<div class="cube-top">

            <a href="#">

            <img class="step4-img1" src="images/step4-img1.png" alt="" />

            <img class="step4-img2" src="images/step4-img2.png" alt="" />

            <img class="step4-img3" src="images/step4-img3.png" alt="" />

            <img class="step4-img4" src="images/step4-img4.png" alt="" />

            </a>   

 </div>



<div class="cube-bottom">                               

            <a href="#">

            <img class="step2-img1" src="images/step2-img1.png" alt="" />

            <img class="step2-img2" src="images/step2-img2.png" alt="" />       

            </a>   

  </div>



<div class="cube-left"> </div>

<div class="cube-right"> </div>

</div>

</div>

CSS

Đây là phần quan trọng nhất, chúng ta sẽ tạo hiệu ứng chuyển cảnh cũng như định dạng cho banner. Trước hết là phần định dạng chung cho phần tạo banner.

/** global **/

.cube-wrap {

    -webkit-perspective: 800px;

    -moz-perspective: 800px;

    -o-perspective: 800px;

    -ms-perspective: 800px;

    perspective: 800px;

    transform: scale(0.8);

    -ms-transform: scale(0.8);

    -webkit-transform: scale(0.8);

    -moz-transform: scale(0.8);

    -o-transform: scale(0.8);

}

.cube {

    position: relative;

    margin: 0 auto;

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    transform-style: preserve-3d;

    transition: transform 1s;

    -webkit-transition: -webkit-transform 1s;

    -moz-transition: -moz-transform 1s;

    -o-transition: -o-transform 1s;

    -ms-transition: -ms-transform 1s;

}

.cube div {

    position: absolute;

    text-align: center;

    overflow: hidden;

}

.cube img {

    display: none;

    margin-left: auto;

    margin-right: auto;

}

.cube a {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

}

Kế đến là các hiệu ứng chuyển cảnh.

/** animations **/

.slideLeft {

    animation-name: slideLeft;

    -webkit-animation-name: slideLeft; 

    animation-duration: 1s;

    -webkit-animation-duration: 1s;

    animation-timing-function: linear; 

    -webkit-animation-timing-function: linear;     

    visibility: visible !important;

}

@keyframes slideLeft {

    0% {

        transform: translateX(150%);

    }

    50%{

        transform: translateX(-8%);

    }

    65%{

        transform: translateX(4%);

    }

    80%{

        transform: translateX(-4%);

    }

    95%{

        transform: translateX(2%);

    }          

    100% {

        transform: translateX(0%);

    }

}

@-webkit-keyframes slideLeft {

    0% {

        -webkit-transform: translateX(150%);

    }

    50%{

        -webkit-transform: translateX(-8%);

    }

    65%{

        -webkit-transform: translateX(4%);

    }

    80%{

        -webkit-transform: translateX(-4%);

    }

    95%{

        -webkit-transform: translateX(2%);

    }          

    100% {

        -webkit-transform: translateX(0%);

    }

}

.slideRight {

    animation-name: slideRight;

    -webkit-animation-name: slideRight;

    animation-duration: 1s;

    -webkit-animation-duration: 1s;

    animation-timing-function: linear; 

    -webkit-animation-timing-function: linear;     

    visibility: visible !important;

}

@keyframes slideRight {

    0% {

        transform: translateX(-150%);

    }

    50%{

        transform: translateX(8%);

    }

    65%{

        transform: translateX(-4%);

    }

    80%{

        transform: translateX(4%);

    }

    95%{

        transform: translateX(-2%);

    }          

    100% {

        transform: translateX(0%);

    }  

}

@-webkit-keyframes slideRight {

    0% {

        -webkit-transform: translateX(-150%);

    }

    50%{

        -webkit-transform: translateX(8%);

    }

    65%{

        -webkit-transform: translateX(-4%);

    }

    80%{

        -webkit-transform: translateX(4%);

    }

    95%{

        -webkit-transform: translateX(-2%);

    }          

    100% {

        -webkit-transform: translateX(0%);

    }

}

.fadeIn {

    animation-name: fadeIn;

    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;  

    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out;

    -webkit-animation-timing-function: ease-in-out;    

    visibility: visible !important;

}

@keyframes fadeIn {

    0% {

        transform: scale(0);

        opacity: 0.0;      

    }

    60% {

        transform: scale(1.1); 

    }

    80% {

        transform: scale(0.9);

        opacity: 1;

    }  

    100% {

        transform: scale(1);

        opacity: 1;

    }      

}

@-webkit-keyframes fadeIn {

    0% {

        -webkit-transform: scale(0);

        opacity: 0.0;      

    }

    60% {

        -webkit-transform: scale(1.1);

    }

    80% {

        -webkit-transform: scale(0.9);

        opacity: 1;

    }  

    100% {

        -webkit-transform: scale(1);

        opacity: 1;

    }      

}

.slideDown {

    animation-name: slideDown;

    -webkit-animation-name: slideDown; 

    animation-duration: 1s;

    -webkit-animation-duration: 1s;

    animation-timing-function: ease;   

    -webkit-animation-timing-function: ease;   

    visibility: visible !important;                    

}

@keyframes slideDown {

    0% {

        transform: translateY(-100%);

    }

    50%{

        transform: translateY(8%);

    }

    65%{

        transform: translateY(-4%);

    }

    80%{

        transform: translateY(4%);

    }

    95%{

        transform: translateY(-2%);

    }          

    100% {

        transform: translateY(0%);

    }      

}

@-webkit-keyframes slideDown {

    0% {

        -webkit-transform: translateY(-100%);

    }

    50%{

        -webkit-transform: translateY(8%);

    }

    65%{

        -webkit-transform: translateY(-4%);

    }

    80%{

        -webkit-transform: translateY(4%);

    }

    95%{

        -webkit-transform: translateY(-2%);

    }          

    100% {

        -webkit-transform: translateY(0%);

    }  

}

.slideUp {

    animation-name: slideUp;

    -webkit-animation-name: slideUp;   

    animation-duration: 1s;

    -webkit-animation-duration: 1s;

    animation-timing-function: ease;   

    -webkit-animation-timing-function: ease;

    visibility: visible !important;        

}

@keyframes slideUp {

    0% {

        transform: translateY(100%);

    }

    50%{

        transform: translateY(-8%);

    }

    65%{

        transform: translateY(4%);

    }

    80%{

        transform: translateY(-4%);

    }

    95%{

        transform: translateY(2%);

    }          

    100% {

        transform: translateY(0%);

    }  

}

@-webkit-keyframes slideUp {

    0% {

        -webkit-transform: translateY(100%);

    }

    50%{

        -webkit-transform: translateY(-8%);

    }

    65%{

        -webkit-transform: translateY(4%);

    }

    80%{

        -webkit-transform: translateY(-4%);

    }

    95%{

        -webkit-transform: translateY(2%);

    }          

    100% {

        -webkit-transform: translateY(0%);

    }  

}

Kích thước banner.

.example1 .cube {

    height: 320px;

    width: 320px;

}

.example1 .cube div {

    height: 320px;

    width: 320px;

}

Rotation effect:

.example1 .cube.step1 {

    transform: rotateY(0deg);

    -moz-transform: rotateY(0deg);

    -webkit-transform: rotateY(0deg);

    -ms-transform: rotateY(0deg);

    -o-transform: rotateY(0deg);

}

.example1 .cube.step2 {

    transform: rotateX(90deg);

    -moz-transform: rotateX(90deg);

    -webkit-transform: rotateX(90deg);

    -ms-transform: rotateX(90deg);

    -o-transform: rotateX(90deg);

}

.example1 .cube.step3 {

    transform: rotateX(180deg);

    -moz-transform: rotateX(180deg);

    -webkit-transform: rotateX(180deg);

    -ms-transform: rotateX(180deg)

    -o-transform: rotateX(180deg);

}

.example1 .cube.step4 {

    transform: rotateX(270deg);

    -moz-transform: rotateX(270deg);

    -webkit-transform: rotateX(270deg);

    -ms-transform: rotateX(270deg);

    -o-transform: rotateX(270deg);

}

Sau đó là chiều quay của banner :

.example1 .cube-front {

    transform: rotateY(0deg) translateZ(160px);

    -moz-transform: rotateY(0deg) translateZ(160px);

    -webkit-transform: rotateY(0deg) translateZ(160px);

    -o-transform: rotateY(0deg) translateZ(160px);

    -ms-transform: rotateY(0deg) translateZ(160px);

    background-color: #CC7473;

}

.example1 .cube-back {

    transform: rotateX(-180deg) translateZ(160px);

    -moz-transform: rotateX(-180deg) translateZ(160px);

    -webkit-transform: rotateX(-180deg) translateZ(160px);

    -o-transform: rotateX(-180deg) translateZ(160px);

    -ms-transform: rotateX(-180deg) translateZ(160px);

    background-color: #9FB3D4;

}

.example1 .cube-right {

    transform: rotateY(90deg) translateZ(160px);

    -moz-transform: rotateY(90deg) translateZ(160px);

    -webkit-transform: rotateY(90deg) translateZ(160px);

    -o-transform: rotateY(90deg) translateZ(160px);

    -ms-transform: rotateY(90deg) translateZ(160px);

    background-color: blue;

    right: 0;

}

.example1 .cube-left {

    transform: rotateY(-90deg) translateZ(160px);

    -moz-transform: rotateY(-90deg) translateZ(160px);

    -webkit-transform: rotateY(-90deg) translateZ(160px);

    -o-transform: rotateY(-90deg) translateZ(160px);

    -ms-transform: rotateY(-90deg) translateZ(160px);

    background-color: blue;

}

.example1 .cube-top {

    transform: rotateX(90deg) translateZ(160px);

    -moz-transform: rotateX(90deg) translateZ(160px);

    -webkit-transform: rotateX(90deg) translateZ(160px);

    -o-transform: rotateX(90deg) translateZ(160px);

    -ms-transform: rotateX(90deg) translateZ(160px);

    background-color: #DBD05C;

}

.example1 .cube-bottom {

    transform: rotateX(-90deg) translateZ(160px);

    -moz-transform: rotateX(-90deg) translateZ(160px);

    -webkit-transform: rotateX(-90deg) translateZ(160px);

    -o-transform: rotateX(-90deg) translateZ(160px);

    -ms-transform: rotateX(-90deg) translateZ(160px);

    background-color: #88C58A;

}

Ví trí đặt hình.

.example1 .cube .step1-img1 {

    margin-top: 126px;

    margin-bottom: 16px;

}

.example1 .cube .step2-img1 {

    position: absolute;

    top: 71px;

    left: 135px;

}

.example1 .cube .step2-img2 {

    position: absolute;

    top: 165px;

    left: 88px;

}

.example1 .cube .step3-img1 {

    margin-top: 100px;

    margin-bottom: 13px;

}

.example1 .cube .step3-img2 {

    position: absolute;

    right: 30px;

    bottom: 30px;

}

.example1 .cube .step4-img1 {

    position: absolute;

    left: 33px;

    top: 72px;

}

.example1 .cube .step4-img2 {

    position: absolute;

    left: 154px;

    top: 126px;

}

.example1 .cube .step4-img3 {

    position: absolute;

    left: 16px;

    top: 150px;

}

.example1 .cube .step4-img4 {

    position: absolute;

    left: 97px;

    bottom: 72px;

}

jQuery

Cuối cùng là các bạn cần có thêm đoạn script sau để điều khiển hiệu ứng.

$(document).ready(function() {

    var step = 2;

    $('.cube').addClass('step1');

    $('.step1-img1').addClass('slideRight').css('display','block');

    $('.step1-img2').addClass('slideLeft').css('display','block');

    setInterval(function(){

        if (step == 5) {

            step = 1;

            $('.cube').removeClass('step4');

        }

        if (step == 1) {

            setTimeout(function() {

                $('.step1-img1').addClass('slideRight').css('display','block');

                $('.step1-img2').addClass('slideLeft').css('display','block');

            }, 1000);

            setTimeout(function() {

                $('.step2-img1').removeClass('slideDown').css('display','none');

                $('.step2-img2').removeClass('fadeIn').css('display','none');

            }, 2000);

        }

        if (step == 2) {

            setTimeout(function() {

                $('.step2-img2').addClass('fadeIn').css('display','block');

            }, 500);

            setTimeout(function() {

                $('.step2-img1').addClass('slideDown').css('display','block');

            }, 2000);

            $('.step3-img1').removeClass('fadeIn').css('display','none');

            $('.step3-img2').removeClass('slideUp').css('display','none');

        }

        if (step == 3) {

            setTimeout(function() {

                $('.step3-img1').addClass('fadeIn').css('display','block');

            }, 500);

            setTimeout(function() {

                $('.step3-img2').addClass('slideUp').css('display','block');

            }, 2000);

            $('.step4-img1').removeClass('slideLeft').css('display','none');

            $('.step4-img2').removeClass('fadeIn').css('display','none');

            $('.step4-img3').removeClass('slideRight').css('display','none');

            $('.step4-img4').removeClass('slideUp').css('display','none');

        }

        if (step == 4) {

            setTimeout(function() {

                $('.step4-img1').addClass('slideLeft').css('display','block');

                $('.step4-img2').addClass('fadeIn').css('display','block');

                $('.step4-img3').addClass('slideRight').css('display','block');

            }, 500);

            setTimeout(function() {

                $('.step4-img4').addClass('slideUp').css('display','block');

            }, 2000);

            $('.step1-img1').removeClass('slideRight').css('display','none');

            $('.step1-img2').removeClass('slideLeft').css('display','none');

        }

        $('.cube').addClass('step'+step).removeClass('step'+(step-1));

        step++;

    }, 4000);

});

 

 HỖ TRỢ TRỰC TUYẾN