Explanation of accurate measurements css 3d cube - css

Question

I have created a cube based on this example.
http://css3.bradshawenterprises.com/transforms/#cubecarousel
What I need to understand is how can I get an exact measure (for example of 200px) of the facing side?
Usually you define the cube's faces and then you apply the transformation at half of the object (50%) so the object gets shifted forward.
How would I push it back so the facing side matches 200px?
Thank you

Answer 1

You should post your current code.
Anyway, I guess that your current images are 200px ?
Then taking into account that (from your link):
A 3D image slider
Note that because of the way a cube works, the image
is moved out towards the screen, and is bigger than it should be. You
should move it back by half the width of an image to make sure it is
normal size.
If you translate your cube 100px (half the width) backwards, your images will be exactly 200px.
If your images are not 200px, definitely post your code

Answer 2

Ok, here is the fiddle: jsfiddle.net/K99GS I tried pushing it backwards, but it changes the pivot so it rotates from the wrong origin...

Answer 3

Ok after trying for one day... I found out my solution was a DUD.
Here is the exact cube (216px) and the code.
How do I push it back????????
Here is the relevant css code:
#controls, #transparency {
text-align:center;
}
#controls span {
padding-right:2em;
cursor:pointer;
}
#cubeCarousel {
-webkit-perspective: 800;
-moz-perspective: 800px;
-ms-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
margin:100px auto 20px auto;
width:216px;
height:216px;
}
#cubeCarousel #cubeSpinner {
position: relative;
margin: 0 auto;
height: 216px;
width: 216px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 108px 0;
-moz-transform-origin: 50% 108px 0;
-ms-transform-origin: 50% 108px 0;
transform-origin: 50% 108px 0;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
#cubeCarousel #Ycube,#cubeCarousel #Zcube {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cubeCarousel .face {
position: absolute;
height: 216px;
width: 216px;
padding: 0px;
background-color:rgba(0,0,0,0.5);
}
#cubeSpinner .one {
-webkit-transform: translateZ(108px);
-moz-transform: translateZ(108px);
-ms-transform: translateZ(108px);
transform: translateZ(108px);
}
#cubeSpinner .two {
-webkit-transform: rotateY(90deg) translateZ(108px);
-moz-transform: rotateY(90deg) translateZ(108px);
-ms-transform: rotateY(90deg) translateZ(108px);
transform: rotateY(90deg) translateZ(108px);
}
#cubeSpinner .three {
-webkit-transform: rotateY(180deg) translateZ(108px);
-moz-transform: rotateY(180deg) translateZ(108px);
-ms-transform: rotateY(180deg) translateZ(108px);
transform: rotateY(180deg) translateZ(108px);
}
#cubeSpinner .four {
-webkit-transform: rotateY(-90deg) translateZ(108px);
-moz-transform: rotateY(-90deg) translateZ(108px);
-ms-transform: rotateY(-90deg) translateZ(108px);
transform: rotateY(-90deg) translateZ(108px);
}
See it in action ->
http://jsfiddle.net/K99GS/5/