Banner 3D Cube làm bằng CSS3 và jQuery

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

Chúc các bạn thành công !