准确测量的说明css 3d立方体

Question

我已经根据此示例创建了一个立方体。 http://css3.bradshawenterprises.com/transforms/#cubecarousel

我需要了解的是如何获得正面的确切尺寸（例如200px）？

通常你定义立方体的面，然后在对象的一半处应用变换（50％），以便对象向前移动。 我如何将它推回来，使面朝200面？

谢谢

Answer 1

您应该发布您的当前代码。

无论如何，我猜你目前的图像是200px？

然后考虑到（从你的链接）：

3D图像滑块
注意，因为这样一个立方体的作品，图像 移出朝屏幕，更大比它应该是。你应该将它移回图像宽度的一半，以确保它是正常尺寸的 。

如果向后翻译您的立方体100px（宽度的一半），您的图像将精确地为200px。

如果你的图片是不是200像素，绝对发布您的代码

Answer 2

好，这里是提琴：jsfiddle.net/K99GS我试着向后推，但因此它从错误的原点旋转，它改变了支点。 ..

Answer 3

好的后，尝试了一天......我发现我的解决方案是一个DUD。 这里是精确的立方体（216px）和代码。 如何将它推回去???????? 下面是相关的CSS代码：

#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); 
} 

看到它在行动 - > http://jsfiddle.net/K99GS/5/