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/

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.

CSS 3-D Transforms

I have a carousel that is working great using (previous) and (next) buttons. The problem I am having is the fact that when it spins, it doesn't stay in one place. So you can click through the carousel using the previous and next buttons, but the carousel is shifting from left to right and back. How do you make the carousel spin in place? I am assuming it has something to do with the x-axis? What part of the code (CSS or JavaScript) makes the carousel spin in place?
<style media="screen">
.containercaro {
width: 210px;
height: 140px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
-o-perspective: 1100px;
perspective: 1100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translateZ( -182px );
-moz-transform: translateZ( -182px );
-o-transform: translateZ( -182px );
transform: translateZ( -182px );
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#carousel figure {
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
#carousel figure:nth-child(1) { background: hsla( 0, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(2) { background: hsla( 60, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(3) { background: hsla( 120, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(4) { background: hsla( 180, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(5) { background: hsla( 240, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(6) { background: hsla( 300, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(1) {
-webkit-transform: rotateY( 0deg ) translateZ( 182px );
-moz-transform: rotateY( 0deg ) translateZ( 182px );
-o-transform: rotateY( 0deg ) translateZ( 182px );
transform: rotateY( 0deg ) translateZ( 182px );
}
#carousel figure:nth-child(2) {
-webkit-transform: rotateY( 60deg ) translateZ( 182px );
-moz-transform: rotateY( 60deg ) translateZ( 182px );
-o-transform: rotateY( 60deg ) translateZ( 182px );
transform: rotateY( 60deg ) translateZ( 182px );
}
#carousel figure:nth-child(3) {
-webkit-transform: rotateY( 120deg ) translateZ( 182px );
-moz-transform: rotateY( 120deg ) translateZ( 182px );
-o-transform: rotateY( 120deg ) translateZ( 182px );
transform: rotateY( 120deg ) translateZ( 182px );
}
#carousel figure:nth-child(4) {
-webkit-transform: rotateY( 180deg ) translateZ( 182px );
-moz-transform: rotateY( 180deg ) translateZ( 182px );
-o-transform: rotateY( 180deg ) translateZ( 182px );
transform: rotateY( 180deg ) translateZ( 182px );
}
#carousel figure:nth-child(5) {
-webkit-transform: rotateY( 240deg ) translateZ( 182px );
-moz-transform: rotateY( 240deg ) translateZ( 182px );
-o-transform: rotateY( 240deg ) translateZ( 182px );
transform: rotateY( 240deg ) translateZ( 182px );
}
#carousel figure:nth-child(6) {
-webkit-transform: rotateY( 300deg ) translateZ( 182px );
-moz-transform: rotateY( 300deg ) translateZ( 182px );
-o-transform: rotateY( 300deg ) translateZ( 182px );
transform: rotateY( 300deg ) translateZ( 182px );
}