Webkit 3D perspective bugs - html

Question

I'm playing around with browsers lately, and now I'm fighting with 3D. WebGL is awesome, and I can do 3D in CSS3 too? Even better! Ok, so my vision was to create floating 3D objects using nested transformations (with preserve-3d).
HTML
<div class="scene">
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
</div>
CSS (I'm using prefixfree)
.scene {
perspective: 3500;
perspective-origin: 25% 100%;
animation: spin 15s infinite linear;
transform-style: preserve-3d;
width: 960px;
height: 350px;
margin: 80px auto;
}
.box {
width: 150px;
height: 180px;
position: absolute;
transform-style: preserve-3d;
top: 40px;
}
.box div {
width: 150px;
height: 180px;
opacity: 0.75;
background-color: #bada55;
position: absolute;
}
.box .side_1 {
transform: rotateY( 0deg ) translateZ( 75px );
background-color: #FF0;
}
.box .side_2 {
transform: rotateX( 180deg ) translateZ( 75px );
background-color: #F00;
}
.box .side_3 {
transform: rotateY( 90deg ) translateZ( 75px );
background-color: #CCC; }
.box .side_4 {
transform: rotateY( -90deg ) translateZ( 75px );
background-color: #000;
}
.box .side_5 {
height: 150px;
width: 150px;
background-color: #00a2ff;
transform: rotateX( 90deg ) translateZ( 75px ); }
.box .side_6 {
height: 150px;
background-color: #00a2ff;
width: 150px;
transform: rotateX( -90deg ) translateZ( 105px ); }
.box:first-child {
position: absolute;
top: 40px;
}
.box:last-child {
right: 0;
}
.box:nth-child(2) {
background: url(../img/dot.jpg) repeat-y center center transparent;
transform: translateZ( -600px );
left: 480px;
}
.box:nth-child(3) {
background: url(../img/dot.jpg) repeat-y center center transparent;
transform: translateZ( 600px );
left: 480px;
}
#keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
Everything is set up, and works. But wait, what is happening? Why does the far object is bigger than close one? I don't understand. Is it webkit bug, or I'm missing something?
http://stretchbox.org/projects/Nextgen/floaters.php - here you have an example.

Answer 1

.scene is also rotating, so you need to apply the perspective and perspective-origin on its parent, which in your case would be body.
body {
perspective: 3500;
perspective-origin: 25% 100%;
}
You can see a demo here:
http://jsfiddle.net/dw58P/embedded/result/
Nice project by the way!