So after struggeling with IE glitches and incompatibilities, I've finally got my correctly sized cuboid working (update: here's an example of it). Animating requires to animate all sides separately instead of a single parent element, however this seems to be the only way to get it working in IE.
Using a single cuboid works fine, multiple cuboids however are problematic, since perspective is applied to the single transformed elements (which is necessary in order to work in IE) they do all look the same, regardless of their position on the stage:
If perspective would be applied to the stage, the vanishing point would sit in its center, causing the child objects to be transformed accordingly, and that's what I'm trying to recreate (while maintaining IE compatibility!):
Unfortunately it looks like applying perspective-origin to the single elements doesn't work, so I'm wondering if anyone has any other ideas how to achieve this effect?
Code for the jsfiddle examples
Perspective on single elements:
<!doctype html>
<html>
<head>
<style>
.stage {
width: 800px;
height: 800px;
background: #f6f6f6;
}
.wrapper, .top, .front{
position: absolute;
width: 200px;
height: 200px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.wrapper:nth-child(1) {
z-index: 4;
}
.wrapper:nth-child(2) {
left: 200px;
z-index: 3;
}
.wrapper:nth-child(3) {
left: 400px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 600px;
z-index: 1;
}
.top {
background-color: #00ff00;
-webkit-transform-origin: 50% 50% -100px;
-moz-transform-origin: 50% 50% -100px;
transform-origin: 50% 50% -100px;
-webkit-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
-moz-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
}
.front {
background-color: #ff0000;
-webkit-transform-origin: 50% 50% -100px;
-moz-transform-origin: 50% 50% -100px;
transform-origin: 50% 50% -100px;
-webkit-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
-moz-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
}
</style>
</head>
<body>
<div class='stage'>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
</div>
</body>
</html>
Perspective on the stage:
<!doctype html>
<html>
<head>
<style>
.stage {
width: 800px;
height: 800px;
background: #f6f6f6;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
}
.wrapper, .top, .front{
position: absolute;
width: 200px;
height: 200px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
z-index: 4;
}
.wrapper:nth-child(2) {
left: 200px;
z-index: 3;
}
.wrapper:nth-child(3) {
left: 400px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 600px;
z-index: 1;
}
.wrapper {
-webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
-moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.top {
background-color: #00ff00;
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
-moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.front {
background-color: #ff0000;
}
</style>
</head>
<body>
<div class='stage'>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
<div class='wrapper'>
<div class='top'></div>
<div class='front'></div>
</div>
</div>
</body>
</html>
