I have created a 3d block that I am animating with tweenmax. I know that IE doesn't support transform-style: preserve-3d so you need to move it to the child, but because there are multiple blocks (more than the example) it doesn't really work especially when using the js to tween them.
My question is there a way to preserve the 3d using javascript for Internet Explorer?
http://jsfiddle.net/ktcle/mhca1k10/2/
.box {
display: block;
width: 180px;
height: 60px;
position: relative;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
outline: 1px solid transparent;
}
.box::before,
.box::after,
.box i,
.box i::before,
.box i::after,
.box b {
content: '';
display: block;
position: absolute;
}
.box::before {
background: red;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
}
.box::after {
background: pink;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
}
.box i {
background: green;
width: 180px;
height: 60px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-ms-transform: translate3D(0, 0, 0px);
-webkit-transform: translate3D(0, 0, 0px);
transform: translate3D(0, 0, 0px);
}
.box i::before {
background: purple;
width: 180px;
height: 60px;
-ms-transform: rotate(180deg) translate3D(0, 0, -60px);
-webkit-transform: rotate(180deg) translate3D(0, 0, -60px);
transform: rotate(180deg) translate3D(0, 0, -60px);
}
.box i::after {
background: orange;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
transform: rotateX(90deg) translate3D(0px, -30px, -30px);
}
.box b {
background: silver;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
transform: rotateX(90deg) translate3D(0px, -30px, 30px);
}
Related
Hey guys I was wondering if you guys could help me for some code that I was interested in. In different websites like udacity, or a website that my friend is making (he won't show me the code) they have diagonal backgrounds. Or maybe you could call it diagonal shapes, or whatever it is I'm just wondering how to create it. An example would be the home page of udacity. They have the background split and I was wondering how to do it (I'm not worried about the gradient) https://www.udacity.com/
.hero--homepage::before {
content: '';
width: 100%;
height: 300px;
z-index: -1000;
background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%);
transform-origin: left bottom;
position: absolute;
top: 0;
left: 0;
-webkit-transform: skew(0deg, -15deg);
-moz-transform: skew(0deg, -15deg);
-ms-transform: skew(0deg, -15deg);
-o-transform: skew(0deg, -15deg);
transform: skew(0deg, -15deg);
}
<div class = "hero--homepage"></div>
This should work,
.wrap {
postion: relative;
background-color: #fff;
width: 100%;
}
.bg:before {
content: '';
position: absolute;
width: 100%;
height: 400px;
background-color: #000;
transform-origin: left bottom;
top: 0;
left: 0;
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
}
<div class="wrap">
<div class="bg"></div>
</div>
Context - I found a codepen of a Book design. The codepen can only open the book cover and show page-1. I wanted to check if I can turn the page and show subsequent page (page-2, page-3). I was able to turn page, but the turned page is getting covered by book cover. In developer tools, I changed the z-index of turned page to be higher than book cover but no change.
Please see the codepen link - http://codepen.io/tusharsaurabh/pen/wgRzdg
Expectation - When I turn page, the turned page should not get concealed by cover.
Below is the code snippet -
$(function(){
var book = $('#book');
$('#view-cover').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('view-cover');
});
$('#view-back').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('view-back');
});
$('#open-book').click(function(){
if ( book.attr('class') !='open-book') {
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('open-book');
}else{
$(this).removeClass('cur');
$('#view-cover').addClass('cur');
book.removeClass().addClass('view-cover');
}
});
$('#view-rotate').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
book.removeClass().addClass('view-rotate');
});
$('#page-turn').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
$('#book-page-turn').addClass('page-turn');
$('#book-page-turn').css('z-index','20');
});
});
.book-font {
width: 420px;
height: 560px;
position: absolute;
top: 0;
bottom: 0;
font-size: 15px;
text-align: center;
text-shadow: 0 2px 0 rgba(30, 35, 45, 1);
box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.1);
z-index: 10;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-transform: translate3d(0, 0, 25px);
-moz-transform: translate3d(0, 0, 25px);
-ms-transform: translate3d(0, 0, 25px);
-o-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
.book-page {
width: 415px;
height: 550px;
line-height: 20px;
position: absolute;
top: 5px;
z-index: 9;
box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.1);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-duration: .5s;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 24px);
-moz-transform: translate3d(0, 0, 24px);
-ms-transform: translate3d(0, 0, 24px);
-o-transform: translate3d(0, 0, 24px);
transform: translate3d(0, 0, 24px);
}
.page {
height: 500px;
margin: 30px 40px;
overflow: hidden;
}
.book-page h3 {
font-size: 14px;
text-align: center;
margin-bottom: 14px;
}
.book-page p {
font-size: 13px;
margin-bottom: 14px;
}
.page-turn {
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: rotate3d(0, 1, 0, -160deg);
-moz-transform: rotate3d(0, 1, 0, -160deg);
-ms-transform: rotate3d(0, 1, 0, -160deg);
-o-transform: rotate3d(0, 1, 0, -160deg);
transform: rotate3d(0, 1, 0, -160deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="book" class="view-cover">
<div class="main">
<div class="book-font">
<div class="book-cover">
<h1 class="title">Wuthering Heights</h1>
<h2 class="author">Emily Bronte</h2>
<div class="publisher">Oxford University Press, USA</div>
</div>
<div class="book-cover-back"></div>
</div>
<div class="book-page" id='book-page-turn'>
<div id="page-1" class="page">
<h3>1 Mr Lockwood visits Wuthering Heights</h3>
.......more code
</div>
</div>
</div>
</body>
</html>
I don't think the z-index is the problem. The page is not displaying due to the transform and backface-visibility styles on .page-turn
Remove these:
/*-webkit-transform: rotate3d(0, 1, 0, -160deg);
-moz-transform: rotate3d(0, 1, 0, -160deg);
-ms-transform: rotate3d(0, 1, 0, -160deg);
-o-transform: rotate3d(0, 1, 0, -160deg);
transform: rotate3d(0, 1, 0, -160deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;*/
And then run the code:
CODEPEN
I'm not sure what transition effects or styling you want, but maybe this will help you get started..
When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle.
HTML:
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next" onClick="load()">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
JavaScript:
function load() {
$("#foo").tigger('click');
}
function burn() {
$(this).css("color", "red");
}
I personally prefer writing it this way: JS Fiddle
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
nav a {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/*--------------------*/
/* Fillpath (http://www.nizuka.fr/)*/
/*--------------------*/
.color-10 {
background: #f3cf3f;
}
.nav-fillpath a {
width: 100px;
height: 100px;
}
.nav-fillpath .icon-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
z-index: 100;
height: 0;
background: #fff;
-webkit-transition: height 0.3s, -webkit-transform 0.3s;
transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-135deg);
transform: translateX(-50%) rotate(-135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.nav-fillpath h3 {
position: absolute;
top: 50%;
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 0.85em;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
left: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
right: 100%;
text-align: right;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(-125deg);
transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(125deg);
transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-55deg);
transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(55deg);
transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
#media screen and (max-width: 520px) {
.nav-slide a.prev,
.nav-reveal a.prev,
.nav-doubleflip a.prev,
.nav-fillslide a.prev,
.nav-growpop a.prev {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.nav-slide a.next,
.nav-reveal a.next,
.nav-doubleflip a.next,
.nav-fillslide a.next,
.nav-growpop a.next {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav-slide a,
.nav-reveal a,
.nav-doubleflip a,
.nav-fillslide a {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.nav-growpop a {
-webkit-transform: translateY(-50%) scale(0.6);
transform: translateY(-50%) scale(0.6);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
Update:
using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..
This post jQuery.click() vs onClick has more detailed answer.
There is a typo in load() function:
function load() {
$("#foo").trigger('click'); //'r' was missing
}
Please note that
$(this)
inside burn() function returns window instance, is that what you are expecting there?
In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):
Name Surname
and js:
function burn(element) {
$(element).css("color", "red");
}
This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.
I have chart with flippers. it means front portion(z-index: 2) will be text and back portion will be chart.
if i mouse over the front, then back portion chart will be displayed(working chrome). But the same is not working IE & Firefox.
Please see the attached pic & code snippet, how to solve this?
I appreciate your help.
Thanks.
Flipper.css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
/*border: 1px solid #ccc;*/
border: none;
height: auto;
width: 100%;
display: inline-block;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
height: auto;
width: 100%;
padding: 0px;
margin: 0px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
border: none;
}
.front .name {
font-size: 2em;
display: inline-block;
font-family: Arial, Verdana, Helvetica, sans-serif;
border-radius: 5px;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
background-color: #cef8ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cef8ff), to(#7fe0f8));
background-image: -webkit-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -moz-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -ms-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -o-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: linear-gradient(to bottom, #cef8ff, #7fe0f8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cef8ff, endColorstr=#7fe0f8);
}
<div id="FlipMainId" class="flip-container" runat="server" style="height: 330px">
<div id="Card1" class="flipper" runat="server">
<div id="Card1Front" class="front" runat="server">
<span class="name" style="height: 325px;">
<table id="HCWF_Front" runat="server" border="0" style="text-align: center">
<tr>
<td>
<br />
<asp:Label ID="FrontLabel1" runat="server" Text="FrontLabel1" CssClass="FlipperheaderLabel"></asp:Label>
</td>
</tr>
<tr>
<td style="color: #777777; font-size: 12px; font-weight: normal; font-style: italic">
<asp:Label ID="FrontLabel2" runat="server" Text="FrontLabel2" CssClass=""></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel3" runat="server" Text="FrontLabel3" CssClass="FlipperLine1Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel4" runat="server" Text="FrontLabel4" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel5" runat="server" Text="FrontLabel5" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel6" runat="server" Text="FrontLabel6" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
</table>
</span>
</div>
<div id="Card1Back" class="back" runat="server" style="height: 330px">
<table width="100%" border="0" runat="server">
<tr>
<td align="right">
<Buttons...../>
</td>
</tr>
<tr>
<td>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"
Height="300">
</telerik:RadHtmlChart>
</td>
</tr>
</table>
</div>
</div>
</div>
I fixed this issue
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/*border: 1px solid #ccc;*/
height: auto;
width: 100%;
}
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: none;
}
.front .name {
font-size: 2em;
display: inline-block;
font-family: helvetica, times, serif;
padding-top: 10px;
border-radius: 5px;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
background-color: #cef8ff;
}
How to make this cube work on IE? I've been stuck here a week and still no success. Here is the `\JSfiddle http://jsfiddle.net/7Lg87gzu/4/
Here is the css code
I don't know what to do here, I've been working for a week right now. Any help must be appreciated.
.cube > div {
position: absolute;
height: 320px;
width: 320px;
padding: 20px;
background-color: rgba(32, 32, 32, 0.85);
font-size: 1em;
line-height: 1em;
color: #fff;
border: 1px solid #202020;
border-radius: 10px;
}
.cube > div:first-child {
-webkit-transform: rotateX(90deg) translateZ(160px);
-moz-transform: rotateX(90deg) translateZ(160px);
transform: rotateX(90deg) translateZ(160px);
-ms-transform:rotateX(90deg) translateZ(160px);
}
.cube > div:nth-child(2) {
-webkit-transform: translateZ(160px);
-moz-transform: translateZ(160px);
transform: translateZ(160px);
}
.cube > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(160px);
-moz-transform: rotateY(90deg) translateZ(160px);
transform: rotateY(90deg) translateZ(160px);
text-align: center;
}
.cube > div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(160px);
-moz-transform: rotateY(180deg) translateZ(160px);
transform: rotateY(180deg) translateZ(160px);
}
.cube > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(160px);
-moz-transform: rotateY(-90deg) translateZ(160px);
transform: rotateY(-90deg) translateZ(160px);
}
.cube > div:nth-child(5) p {
text-align: center;
font-size: 2.77em;
margin: 40px;
line-height: 60px;
}
.cube > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
}
.cube {
position: relative;
margin: 0 auto 100px;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-24deg) rotateY(20deg);
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(-24deg) rotateY(20deg);
transition: transform 50ms linear;
transform-style: preserve-3d;
transform: rotateX(-24deg) rotateY(30deg);
}