We Keep Coding

css animation doesn't work with internet explorer browser (transform)

I created an css animation (transform & keyframes) to rotate the cube.
However, it does not work with Internet Explorer browser.
I also tried the vendor prefix (-ms-).
But that was not the solution.
It is require by the project requirements, if it is not possible, another solution must be considered.
Is it possible to make this work with Internet Explorer browser?
https://jsfiddle.net/1acjLn53/
HTML
<div class="cube">
<div class="container">
<div class="side m--1"></div>
<div class="side m--2"></div>
<div class="side m--3"></div>
<div class="side m--4"></div>
<div class="side m--5"></div>
<div class="side m--6"></div>
</div>
</div>
CSS
.cube {
overflow: hidden;
position: relative;
top: 0;
height: 126px;
width: 126px;
}
.container {
-webkit-animation: rotation 6s infinite;
animation: rotation 6s infinite;
margin: auto;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 56px;
top: 50px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
width: 56px;
}
.container > div {
float: left;
overflow: hidden;
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 56px;
width: 56px;
}
.side.m--1 {
background-color: #ccc;
-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--2 {
background-color: #aaa;
-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--3 {
background-color: #888;
-webkit-transform: translateX(0px) translateY(0px) translateZ(28px);
transform: translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--4 {
background-color: #aaa;
-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--5 {
background-color: #888;
-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(28px);
}
.side.m--6 {
background-color: #ccc;
-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(28px);
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(28px);
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotateX(-0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
50% {
-webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
}
75% {
-webkit-transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
}
}
#keyframes rotation {
0% {
-webkit-transform: rotateX(-0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
50% {
-webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
}
75% {
-webkit-transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
transform: rotateX(270deg) rotateY(270deg) rotateZ(90deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
}
}

Make a Webpage out of a 3D Cube ?

I´m trying to make a webpage out of a 3D cube with 6 surfaces/pages.
This is the Code of my 3D Cube:
$(document).ready(function(){
$('button').click(function(){
$('button').removeClass('active');
$(this).addClass('active');
});
$('.ft').click(function(){
$('#shape').removeClass().addClass('show-ft');
});
$('.rt').click(function(){
$('#shape').removeClass().addClass('show-rt');
});
$('.lt').click(function(){
$('#shape').removeClass().addClass('show-lt');
});
$('.bk').click(function(){
$('#shape').removeClass().addClass('show-bk');
});
$('.tp').click(function(){
$('#shape').removeClass().addClass('show-tp');
});
$('.bm').click(function(){
$('#shape').removeClass().addClass('show-bm');
});
$('.spinstart').click(function(){
$('#shape').addClass('spin');
});
$('.spinstop').click(function(){
$('#shape').removeClass('spin');
});
});
#main {
margin:0;
padding:0;
border:1px solid #ddd;
background-color:white;
width:800px;
height:500px;
margin:10px auto;
}
.btn-group-wraper {
position:absolute;
top:30px;
left:65px;
}
.shadow {
position:absolute;
width:100px;
height:100px;
box-shadow:0 0 15px white;
box-shadow:inset 0 0 155px white;
background-color:#000 !important;
opacity:.15 !important; -webkit-transform:
rotateX(90deg) translateZ(-100px);
-moz-transform: rotateX(90deg) translateZ(-100px);
}
#container {
width:100%; -webkit-perspective:800px; -moz-
perspective:800px;
perspective:800px; position:relative;
}
#shape {
position:relative; margin:0 auto; top:170px;
width:125px; height:125px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: rotateX(-5deg) rotateY(-30deg);
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
transition: transform 2s;
}
#-webkit-keyframes spin {
to { -webkit-transform: rotateX(360deg)
rotateY(360deg);
}
}
#-moz-keyframes spin {
to {
-moz-transform: rotateX(360deg) rotateY(360deg);
}
}
#keyframes spin {
to { transform: rotateX(360deg) rotateY(360deg); }
}
#shape > div {
position:absolute;
width:125px;
height:125px;
border:1px solid white;
background-color:#999;
}
#shape .ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape .rt {
-webkit-transform: rotateY(90deg) translateZ(63px);
-moz-transform: rotateY(90deg) translateZ(63px);
transform: rotateY(90deg) translateZ(63px);
}
#shape .bk { -webkit-transform: rotateY(180deg)
translateZ(63px);
-moz-transform: rotateY(180deg) translateZ(63px);
transform: rotateY(180deg) translateZ(63px);
}
#shape .lt {
-webkit-transform: rotateY(270deg) translateZ(63px);
-moz-transform: rotateY(270deg) translateZ(63px);
transform: rotateY(270deg) translateZ(63px);
}
#shape .tp {
-webkit-transform: rotateX(90deg) translateZ(63px);
-moz-transform: rotateX(90deg) translateZ(63px);
transform: rotateX(90deg) translateZ(63px);
}
#shape .bm {
-webkit-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
-moz-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
}
#shape.show-ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape.show-rt {
-webkit-transform: rotateX(360deg) rotateY(-90deg);
-moz-transform: rotateX(360deg) rotateY(-90deg);
transform: rotateX(360deg) rotateY(-90deg);
}
#shape.show-bk {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#shape.show-lt {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
transform: rotateY(90deg);
}
#shape.show-tp {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: rotateX(-90deg) rotateY(-360deg);
-moz-transform: rotateX(-90deg) rotateY(-360deg);
transform: rotateX(-90deg) rotateY(-360deg);
}
#shape.show-bm {
-webkit-transform: rotateX(90deg) rotateY(360deg);
-moz-transform: rotateX(90deg) rotateY(360deg);
transform: rotateX(90deg) rotateY(360deg);
}
#shape.spin {
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
#shape {
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: scale(1);
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: scale(1);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: scale(1);
transform: rotateX(-5deg) rotateY(-30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main">
<div id="container">
<div class="btn-group-wraper">
<div>
<button class="ft">1</button>
<button class="rt">2</button>
<button class="bk">3</button>
<button class="lt">4</button>
<button class="tp">5</button>
<button class="bm">6</button>
</div>
<div>
<button class="spinstart">spin start</button>
<button class="spinstop">spin stop</button>
</div>
</div>
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
</div>
</div>
To the Fiddle.js:
Fiddle.js
Please ignore the spinstart and spinstop.
To be honest this is not a selfmade code, I found it on a Website and downloaded it there.
As I had no idea about all that 3D stuff I started to learn it but
my knowledge about 3D cubes with css fails at the point optimizing the sizes of the cube.
I tried adding my sites into the:
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
The Problem about that was, when I do that the cube breaks, meaning it doesn´t rotate correctly anymore, I don´t know if it was because a webpage is bigger than just 1, 2, 3, 4, 5, 6 although I changed the size of the surfaces to auto so they adapt to the webpage´s css.
Maybe I could correct myself if you guys could give me a short explanation or
pointer on this topic.
Please don´t vote this Question down, I did not find anything similar to this topic on the web. I only found simplified examples and tutorials on 3D cubes.
Note:
I not asking for codes, I´m asking for help.

CSS/js Flip Cards

I have a card cover and back of the card. How can I flip my card from cover to back by the click on the button, like this?
Here is demo

Probably you need
html
<div class="flip3D">
<div class="back">Box 1 - Back</div>
<div class="front">Box 1 - Front</div>
</div>
css
.flip3D{ width:240px; height:200px; margin:10px; float:left; } .flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#FC0; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front{ -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back{ -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }
http://jsfiddle.net/GDdtS/9444/

CSS Transform happens instantly in Safari

i'm a huge noob just trying to learning to code on my own.. and i'm at the point where i want my code to work in all the popular browsers .. :) .. i'm starting with Safari.. my code runs fine in chrome.. but the -webkit-transition: transform 1.0s; just happens instantly on safari for some reason.. not sure if there is an extra meta tag that I need or something.. but this is my code:
HTML
<section id="prismSection">
<h1 class="text-center">Now a Rectangular Prism</h1>
<div class="prismWrapper">
<div id="prism">
<figure class="front"><p>Front</p></figure>
<figure class="back"><p>Back</p></figure>
<figure class="right"><p class="vertical-text">Right</p></figure>
<figure class="left"><p class="vertical-text2">Left</p></figure>
<figure class="top"><p>Top</p></figure>
<figure class="bottom"><p>Bottom</p></figure>
</div>
</div>
<button class="btn btn-lg btn-primary" onclick="prismFront();">Front</button>
<button class="btn btn-lg btn-primary" onclick="prismBack();">Back</button>
<button class="btn btn-lg btn-primary" onclick="prismRight();">Right</button>
<button class="btn btn-lg btn-primary" onclick="prismLeft();">Left</button>
<button class="btn btn-lg btn-primary" onclick="prismTop();">Top</button>
<button class="btn btn-lg btn-primary" onclick="prismBottom();">Bottom</button>
</section>
CSS
#prismSection {
text-align: center;
padding-bottom: 40px;
}
#prismSection > button {
border: 2px solid black;
}
#prismSection > h1 {
color: white;
font-family: Paytone One, arial;
font-size: 2.5em;
}
#prism > figure:nth-child(1) > p,
#prism > figure:nth-child(2) > p,
#prism > figure:nth-child(3) > p,
#prism > figure:nth-child(4) > p {
color: black;
font-family: Paytone One, arial;
position: relative;
top: 50px;
font-size: 3em;
}
#prism > figure:nth-child(4) > p {
top: 65px;
}
#prism > figure:nth-child(5) > p,
#prism > figure:nth-child(6) > p {
color: black;
font-family: Paytone One, arial;
position: relative;
top: 10px;
font-size: 3em;
}
.vertical-text {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.vertical-text2 {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.prismWrapper {
margin-top: 50px;
margin-bottom: 50px;
width: 300px;
height: 200px;
position: relative;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
margin-right: auto;
margin-left: auto;
}
#prism {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
#prism figure {
display: block;
position: absolute;
background: #606060;
border: 2px solid white;
border-radius: 5px;
}
#prism .front,
#prism .back {
width: 296px;
height: 196px;
}
#prism .right,
#prism .left {
width: 96px;
height: 196px;
left: 100px;
}
#prism .top,
#prism .bottom {
width: 296px;
height: 96px;
top: 50px;
}
#prism .front {
transform: rotateY( 0deg ) translateZ( 50px);
-webkit-transform: rotateY( 0deg ) translateZ( 50px);
-ms-transform: rotateY( 0deg ) translateZ( 50px);
-o-transform: rotateY( 0deg ) translateZ( 50px);
-moz-transform: rotateY( 0deg ) translateZ( 50px);
}
#prism .back {
transform: rotateY( 180deg ) translateZ( 50px);
-webkit-transform: rotateY( 180deg ) translateZ( 50px);
-ms-transform: rotateY( 180deg ) translateZ( 50px);
-o-transform: rotateY( 180deg ) translateZ( 50px);
-moz-transform: rotateY( 180deg ) translateZ( 50px);
}
#prism .right {
transform: rotateY( 90deg ) translateZ( 150px );
-webkit-transform: rotateY( 90deg ) translateZ( 150px );
-ms-transform: rotateY( 90deg ) translateZ( 150px );
-o-transform: rotateY( 90deg ) translateZ( 150px );
-moz-transform: rotateY( 90deg ) translateZ( 150px );
}
#prism .left {
transform: rotateY( -90deg ) translateZ( 150px );
-webkit-transform: rotateY( -90deg ) translateZ( 150px );
-ms-transform: rotateY( -90deg ) translateZ( 150px );
-o-transform: rotateY( -90deg ) translateZ( 150px );
-moz-transform: rotateY( -90deg ) translateZ( 150px );
}
#prism .top {
transform: rotatex( 90deg ) translateZ( 100px );
-webkit-transform: rotatex( 90deg ) translateZ( 100px );
-ms-transform: rotatex( 90deg ) translateZ( 100px );
-o-transform: rotatex( 90deg ) translateZ( 100px );
-moz-transform: rotatex( 90deg ) translateZ( 100px );
}
#prism .bottom {
transform: rotatex( -90deg ) translateZ( 100px );
-webkit-transform: rotatex( -90deg ) translateZ( 100px );
-ms-transform: rotatex( -90deg ) translateZ( 100px );
-o-transform: rotatex( -90deg ) translateZ( 100px );
-moz-transform: rotatex( -90deg ) translateZ( 100px );
}
#prism {
transform: translateZ( -100px );
-webkit-transform: translateZ( -100px );
-ms-transform: translateZ( -100px );
-o-transform: translateZ( -100px );
-moz-transform: translateZ( -100px );
}
#prism.show-front {
transform: translateZ( -50px ) rotateY( 0deg );
-webkit-transform: translateZ( -50px ) rotateY( 0deg );
-ms-transform: translateZ( -50px ) rotateY( 0deg );
-o-transform: translateZ( -50px ) rotateY( 0deg );
-moz-transform: translateZ( -50px ) rotateY( 0deg );
}
#prism.show-back {
transform: translateZ( -50px ) rotateY( -180deg );
-webkit-transform: translateZ( -50px ) rotateY( -180deg );
-ms-transform: translateZ( -50px ) rotateY( -180deg );
-o-transform: translateZ( -50px ) rotateY( -180deg );
-moz-transform: translateZ( -50px ) rotateY( -180deg );
}
#prism.show-right {
transform: translateZ( -150px ) rotateY( -90deg );
-webkit-transform: translateZ( -150px ) rotateY( -90deg );
-ms-transform: translateZ( -150px ) rotateY( -90deg );
-o-transform: translateZ( -150px ) rotateY( -90deg );
-moz-transform: translateZ( -150px ) rotateY( -90deg );
}
#prism.show-left {
transform: translateZ( -150px ) rotateY( 90deg );
-webkit-transform: translateZ( -150px ) rotateY( 90deg );
-ms-transform: translateZ( -150px ) rotateY( 90deg );
-o-transform: translateZ( -150px ) rotateY( 90deg );
-moz-transform: translateZ( -150px ) rotateY( 90deg );
}
#prism.show-top {
transform: translateZ( -100px ) rotateX( -90deg );
-webkit-transform: translateZ( -100px ) rotateX( -90deg );
-ms-transform: translateZ( -100px ) rotateX( -90deg );
-o-transform: translateZ( -100px ) rotateX( -90deg );
-moz-transform: translateZ( -100px ) rotateX( -90deg );
}
#prism.show-bottom {
transform: translateZ( -100px ) rotateX( 90deg );
-webkit-transform: translateZ( -100px ) rotateX( 90deg );
-ms-transform: translateZ( -100px ) rotateX( 90deg );
-o-transform: translateZ( -100px ) rotateX( 90deg );
-moz-transform: translateZ( -100px ) rotateX( 90deg );
}
#prism {
transition: transform 1.0s;
-webkit-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-moz-transition: transform 1.0s;
}
Javascript
function prismFront() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-front');
}
function prismBack() {
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-back');
}
function prismRight() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-right');
}
function prismLeft() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-left');
}
function prismTop() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-top');
}
function prismBottom() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-front');
$('#prism').addClass('show-bottom');
}
i'll try to get a jsfiddle working soon.. thanks a ton.
Edit:
I've tried rewriting the button functions using more jquery syntax and giving each button an ID:
<script type="text/javascript">
$(function() {
$('#btnFront').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
});
$('#btnBack').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( -180deg )');
});
$('#btnRight').on('click', function() {
$('#prism').css('transform', 'translateZ( -150px ) rotateY( -90deg )');
});
$('#btnLeft').on('click', function() {
$('#prism').css('transform', 'translateZ( -150px ) rotateY( 90deg )');
});
$('#btnTop').on('click', function() {
$('#prism').css('transform', 'translateZ( -100px ) rotateX( -90deg )');
});
$('#btnBottom').on('click', function() {
$('#prism').css('transform', 'translateZ( -100px ) rotateX( 90deg )');
});
});
</script>
same results.

All your transition rules apply to the "transform" rule but not the prefixed rules like -webkit-transform. Therefore it will not try to apply the transition to a -webkit-transform rule.
Try using: -webkit-transition: -webkit-transform 1.0s;
If that still does not work, use the Web Developer tools in Safari to find out which rules are applied to the elements (invalid rules will be crossed out).
EDIT: JsFiddle for clarity: link

Activate a CSS flip transition

I have been following Adam Khoury's tutorial on how to make a 3d flip animation which works fine with the hover pseudo class but I'm struggling to activate the transition with java script. My aim is to click the box to activate the transition.
https://www.youtube.com/watch?v=W3eJWpvIl0g
Html:
<div class="flip3D" >
<div class="back">Box 1 - Back</div>
<div class="front" >Box 1 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 2 - Back</div>
<div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 3 - Back</div>
<div class="front">Box 3 - Front</div>
CSS:
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}
.flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg );
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D:active> .front{
-webkit-transform: perspective( 600px ) rotateY( -180deg );
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:active > .back{
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg ); }
Thank you!

You can use jQuery for that. And trigger the hover event once you click on the box.
Try this
$('.box').click(function () {
$('.animationElement').trigger('hover');
}
This would activate the hover event for the element. More over CSS would take action here and would trigger the animation.
Or you can use a className for that and append the classname to the element.
$('.box').click(function () {
$('.animationElement').attr('class', 'flip3D');
}
Then CSS would do the job.