As you probably have noticed, some time ago we published animated banners on our site. Now, we would like to share the code with you, so you will be able to use similar banners on your site.
We have prepared 4 examples, you can see them all on live demo:
Global CSS styles
First of all, let's take a look at global CSS styles used for all examples.
/** 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;
}
/** 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%);
}
}The only thing that you may like to change is the transition duration. In all our examples it is 1s, but keep in your mind that if you change this value you may also need to adjust the durations in the jQuery script.
jQuery script
As I have mentioned about jQuery, let's take a look on our script:
$(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);
});We have divided our cube animation into 4 steps. Each step appears every 4 seconds, one after another. If you would like to change duration you need to edit the 57th line.
For each step we display images in animated way. You can specify the animation type as well as when an image should appear. Let's take step 1 as example:
if (step == 1) {
setTimeout(function() {
$('.step1-img1').addClass('slideRight').css('display','block');
//for addClass value you can change the animation effect
$('.step1-img2').addClass('slideLeft').css('display','block');
}, 1000);
//1000 - it means the images will show up after 1000ms
setTimeout(function() {
$('.step2-img1').removeClass('slideDown').css('display','none');
$('.step2-img2').removeClass('fadeIn').css('display','none');
}, 2000);
//2000 - it means the images will show up after 2000ms
}Available animation types:
- slideRight – slide to the right
- slideLeft – slide to the left
- slideUp – slide to the top
- slideDown – slide to the bottom
- fadeIn – fade in
Let's take a closer look to each example.
Example 1
In the first example we have displayed a 3D cube which rotates around its x-axis.
HTML code
Let's take a look at html code.
<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>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) For the href attribute, you need to enter a URL address where the banner should redirect to:
<a href="#">2) On each side of our cube, we have displayed images in animated way. If you want to use your own images, then make sure the path is correct for each image:
<img src="/images/step1-img1.png" alt="" />CSS styles:
Cube dimensions:
.example1 .cube {
height: 320px;
width: 320px;
}
.example1 .cube div {
height: 320px;
width: 320px;
}If you want to change the cube dimensions, you can simply change the width and height values.
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);
}We rotate the cube around its x-axis. The sides will appear in the following order: front, bottom, back and top.
Cube sides:
.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;
}For each side, you can specify the background color. The transforms are used to position each side of the 3D cube, you do not need to edit them unless you change the rotation effect.
Position of images:
.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;
}Using margins or absolute positioning you need to place all images on each cube side.
Example 2
In the second example we have displayed a 3D cube which rotates around its y-axis.
HTML code
Let's take a look at html code.
<div class="cube-wrap example2">
<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"> </div>
<div class="cube-bottom"> </div>
<div class="cube-left">
<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-right">
<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>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) For the href attribute, you need to enter a URL address where the banner should redirect to:
<a href="#">2) On each side of our cube, we have displayed images in animated way. If you want to use your own images, then make sure the path is correct for each image:
<img src="/images/step1-img1.png" alt="" />CSS styles:
Cube dimensions:
.example2 .cube {
height: 320px;
width: 320px;
}
.example2 .cube div {
height: 320px;
width: 320px;
}If you want to change the cube dimensions, you can simply change the width and height values.
Rotation effect:
.example2 .cube.step1 {
transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
}
.example2 .cube.step2 {
transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
}
.example2 .cube.step3 {
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.example2 .cube.step4 {
transform: rotateY(270deg);
-moz-transform: rotateY(270deg);
-webkit-transform: rotateY(270deg);
-ms-transform: rotateY(270deg);
-o-transform: rotateY(270deg);
}We rotate the cube around its y-axis. The sides will appear in the following order: front, left, back and right.
Cube sides:
.example2 .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;
}
.example2 .cube-back {
transform: rotateY(180deg) translateZ(160px);
-moz-transform: rotateY(180deg) translateZ(160px);
-webkit-transform: rotateY(180deg) translateZ(160px);
-o-transform: rotateY(180deg) translateZ(160px);
-ms-transform: rotateY(180deg) translateZ(160px);
background-color: #9FB3D4;
}
.example2 .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: #DBD05C;
right: 0;
}
.example2 .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: #88C58A;
}
.example2 .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: blue;
}
.example2 .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: blue;
}For each side, you can specify the background color. The transforms are used to position each side of the 3D cube, you do not need to edit them unless you change the rotation effect.
Position of images:
.example2 .cube .step1-img1 {
margin-top: 126px;
margin-bottom: 16px;
}
.example2 .cube .step2-img1 {
position: absolute;
top: 71px;
left: 135px;
}
.example2 .cube .step2-img2 {
position: absolute;
top: 165px;
left: 88px;
}
.example2 .cube .step3-img1 {
margin-top: 100px;
margin-bottom: 13px;
}
.example2 .cube .step3-img2 {
position: absolute;
right: 30px;
bottom: 30px;
}
.example2 .cube .step4-img1 {
position: absolute;
left: 33px;
top: 72px;
}
.example2 .cube .step4-img2 {
position: absolute;
left: 154px;
top: 126px;
}
.example2 .cube .step4-img3 {
position: absolute;
left: 16px;
top: 150px;
}
.example2 .cube .step4-img4 {
position: absolute;
left: 97px;
bottom: 72px;
}Using margins or absolute positioning you need to place all images on each cube side.
Example 3
In the third example we have displayed a 3D cube which rotates around its x-axis and y-axis.
HTML code
Let's take a look at html code.
<div class="cube-wrap example3">
<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="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-top"> </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">
<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-right"> </div>
</div>
</div>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) For the href attribute, you need to enter a URL address where the banner should redirect to:
<a href="#">2) On each side of our cube, we have displayed images in animated way. If you want to use your own images, then make sure the path is correct for each image:
<img src="/images/step1-img1.png" alt="" />CSS styles:
Cube dimensions:
.example3 .cube {
height: 320px;
width: 320px;
}
.example3 .cube div {
height: 320px;
width: 320px;
}If you want to change the cube dimensions, you can simply change the width and height values.
Rotation effect:
.example3 .cube.step1 {
transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
}
.example3 .cube.step2 {
transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
}
.example3 .cube.step3 {
transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
}
.example3 .cube.step4 {
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}We rotate the cube around its y-axis and x-axis. The sides will appear in the following order: front, bottom, left and back.
Cube sides:
.example3 .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;
}
.example3 .cube-back {
transform: rotateY(180deg) translateZ(160px);
-moz-transform: rotateY(180deg) translateZ(160px);
-webkit-transform: rotateY(180deg) translateZ(160px);
-o-transform: rotateY(180deg) translateZ(160px);
-ms-transform: rotateY(180deg) translateZ(160px);
background-color: #DBD05C;
}
.example3 .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: black; /** not visible **/
}
.example3 .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: #9FB3D4;
}
.example3 .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: black; /** not visible **/
}
.example3 .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;
}For each side, you can specify the background color. The transforms are used to position each side of the 3D cube, you do not need to edit them unless you change the rotation effect.
Position of images:
.example3 .cube .step1-img1 {
margin-top: 126px;
margin-bottom: 16px;
}
.example3 .cube .step2-img1 {
position: absolute;
top: 71px;
left: 135px;
}
.example3 .cube .step2-img2 {
position: absolute;
top: 165px;
left: 88px;
}
.example3 .cube .step3-img1 {
margin-top: 100px;
margin-bottom: 13px;
}
.example3 .cube .step3-img2 {
position: absolute;
right: 30px;
bottom: 30px;
}
.example3 .cube .step4-img1 {
position: absolute;
left: 33px;
top: 72px;
}
.example3 .cube .step4-img2 {
position: absolute;
left: 154px;
top: 126px;
}
.example3 .cube .step4-img3 {
position: absolute;
left: 16px;
top: 150px;
}
.example3 .cube .step4-img4 {
position: absolute;
left: 97px;
bottom: 72px;
}Using margins or absolute positioning you need to place all images on each cube side.
Example 4
In the fourth example we have displayed a 3D rectangular prism which rotates around its x-axis.
HTML code
Let's take a look at html code.
<div class="cube-wrap example4">
<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>If you would like to adapt this code for your own site, you will need to edit the following lines:
1) For the href attribute, you need to enter a URL address where the banner should redirect to:
<a href="#">2) On each side of our box, we have displayed images in animated way. If you want to use your own images, then make sure the path is correct for each image:
<img src="/images/step1-img1.png" alt="" />CSS styles:
Rectangular prism dimensions:
.example4 .cube {
height: 284px;
width: 720px;
}
.example4 .cube div {
height: 284px;
width: 720px;
}
.example4 .cube-right,
.example4 .cube-left {
width: 284px !important;
}If you want to change the prism dimensions, you can simply change the width and height values.
Rotation effect:
.example4 .cube.step1 {
transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
}
.example4 .cube.step2 {
transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
}
.example4 .cube.step3 {
transform: rotateX(180deg) rotateY(0deg);
-moz-transform: rotateX(180deg) rotateY(0deg);
-webkit-transform: rotateX(180deg) rotateY(0deg);
-ms-transform: rotateX(180deg) rotateY(0deg);
-o-transform: rotateX(180deg) rotateY(0deg);
}
.example4 .cube.step4 {
transform: rotateX(270deg) rotateY(0deg);
-moz-transform: rotateX(270deg) rotateY(0deg);
-webkit-transform: rotateX(270deg) rotateY(0deg);
-ms-transform: rotateX(270deg) rotateY(0deg);
-o-transform: rotateX(270deg) rotateY(0deg);
}We rotate the prism around its x-axis. The sides will appear in the following order: front, bottom, back and top.
Rectangular prism sides:
.example4 .cube-front {
transform: rotateY(0deg) translateZ(142px);
-moz-transform: rotateY(0deg) translateZ(142px);
-webkit-transform: rotateY(0deg) translateZ(142px);
-o-transform: rotateY(0deg) translateZ(142px);
-ms-transform: rotateY(0deg) translateZ(142px);
background-color: #CC7473;
}
.example4 .cube-back {
transform: rotateX(-180deg) translateZ(142px);
-moz-transform: rotateX(-180deg) translateZ(142px);
-webkit-transform: rotateX(-180deg) translateZ(142px);
-o-transform: rotateX(-180deg) translateZ(142px);
-ms-transform: rotateX(-180deg) translateZ(142px);
background-color: #9FB3D4;
}
.example4 .cube-right {
transform: rotateY(90deg) translateZ(142px);
-moz-transform: rotateY(90deg) translateZ(142px);
-webkit-transform: rotateY(90deg) translateZ(142px);
-o-transform: rotateY(90deg) translateZ(142px);
-ms-transform: rotateY(90deg) translateZ(142px);
background-color: blue;
right: 0;
}
.example4 .cube-left {
transform: rotateY(-90deg) translateZ(142px);
-moz-transform: rotateY(-90deg) translateZ(142px);
-webkit-transform: rotateY(-90deg) translateZ(142px);
-o-transform: rotateY(-90deg) translateZ(142px);
-ms-transform: rotateY(-90deg) translateZ(142px);
background-color: blue;
}
.example4 .cube-top {
transform: rotateX(90deg) translateZ(142px);
-moz-transform: rotateX(90deg) translateZ(142px);
-webkit-transform: rotateX(90deg) translateZ(142px);
-o-transform: rotateX(90deg) translateZ(142px);
-ms-transform: rotateX(90deg) translateZ(142px);
background-color: #DBD05C;
}
.example4 .cube-bottom {
transform: rotateX(-90deg) translateZ(142px);
-moz-transform: rotateX(-90deg) translateZ(142px);
-webkit-transform: rotateX(-90deg) translateZ(142px);
-o-transform: rotateX(-90deg) translateZ(142px);
-ms-transform: rotateX(-90deg) translateZ(142px);
background-color: #88C58A;
}For each side, you can specify the background color. The transforms are used to position each side of the 3D rectangular prism, you do not need to edit them unless you change the rotation effect.
Position of images:
.example4 .cube .step1-img1 {
margin-top: 108px;
margin-bottom: 16px;
}
.example4 .cube .step2-img1 {
position: absolute;
top: 53px;
left: 335px;
}
.example4 .cube .step2-img2 {
position: absolute;
top: 146px;
left: 288px;
}
.example4 .cube .step3-img1 {
margin-top: 64px;
margin-bottom: 13px;
}
.example4 .cube .step3-img2 {
position: absolute;
right: 230px;
bottom: 30px;
}
.example4 .cube .step4-img1 {
position: absolute;
left: 233px;
top: 54px;
}
.example4 .cube .step4-img2 {
position: absolute;
left: 354px;
top: 108px;
}
.example4 .cube .step4-img3 {
position: absolute;
left: 216px;
top: 132px;
}
.example4 .cube .step4-img4 {
position: absolute;
left: 297px;
bottom: 54px;
}Using margins or absolute positioning you need to place all images on each prism side.
Browser Support
Animated banners are fully supported on: Chrome, Firefox, Safari 5+.
However, we have added some CSS styles that allow to partially support our animated banners on IE 10+ and Opera browsers. The banner sides are displayed one after another without the 3D rotation effect and without animations.
Let's take a look at CSS styles for IE and Opera:
/** ie >= 10 support **/
_:-ms-input-placeholder, :root .cube-wrap {
-webkit-perspective: none;
-moz-perspective: none;
-o-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: none;
-moz-perspective-origin: none;
-moz-transform-origin: none;
-o-perspective-origin: none;
-ms-perspective-origin: none;
perspective-origin: none;
transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
}
_:-ms-input-placeholder, :root .cube-wrap div {
transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
}
_:-ms-input-placeholder, :root .cube-wrap img {
display: block !important;
-webkit-animation: none !important;;
animation: none !important;
}
_:-ms-input-placeholder, :root .cube-wrap .cube div {
filter: opacity(0) !important;
opacity: 0 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example1 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example1 .step2 .cube-bottom {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example1 .step3 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example1 .step4 .cube-top {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example2 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example2 .step2 .cube-left {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example2 .step3 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example2 .step4 .cube-right {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example3 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example3 .step2 .cube-bottom {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example3 .step3 .cube-left {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example3 .step4 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example4 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example4 .step2 .cube-bottom {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example4 .step3 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-ms-input-placeholder, :root .cube-wrap.example4 .step4 .cube-top {
filter: opacity(100) !important;
opacity: 1 !important;
}
/** opera support **/
_:-o-prefocus, body:last-child .cube-wrap {
-webkit-perspective: none;
-moz-perspective: none;
-o-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: none;
-moz-perspective-origin: none;
-moz-transform-origin: none;
-o-perspective-origin: none;
-ms-perspective-origin: none;
perspective-origin: none;
transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
}
_:-o-prefocus, body:last-child .cube-wrap div {
transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
}
_:-o-prefocus, body:last-child .cube-wrap img {
display: block !important;
-webkit-animation: none !important;;
animation: none !important;
}
_:-o-prefocus, body:last-child .cube-wrap .cube div {
filter: opacity(0) !important;
opacity: 0 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example1 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example1 .step2 .cube-bottom {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example1 .step3 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example1 .step4 .cube-top {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example2 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example2 .step2 .cube-left {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example2 .step3 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example2 .step4 .cube-right {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example3 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example3 .step2 .cube-bottom {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example3 .step3 .cube-left {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example3 .step4 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example4 .step1 .cube-front {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example4 .step2 .cube-bottom {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example4 .step3 .cube-back {
filter: opacity(100) !important;
opacity: 1 !important;
}
_:-o-prefocus, body:last-child .cube-wrap.example4 .step4 .cube-top {
filter: opacity(100) !important;
opacity: 1 !important;
}As you can see the IE styles are preceded by the following selectors:
_:-ms-input-placeholder, :root .selector {}This way we are able to target IE10+ browser only.
A similar hack we used for Opera browser:
_:-o-prefocus, body:last-child .selector {}If you would like to add partially support for other browser versions, you can find many useful hacks here:
http://browserhacks.com/
Other Example
On Joomla-Monster.com we have a live example of an animated banner based on the same solution. Take a look on it: