精确测量 css 3d 立方体的解释答案

【问题标题】：Explanation of accurate measurements css 3d cube精确测量 css 3d 立方体的解释
【发布时间】：2013-07-24 15:31:03
【问题描述】：

我根据这个例子创建了一个立方体。 http://css3.bradshawenterprises.com/transforms/#cubecarousel

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

通常您定义立方体的面，然后在对象的一半 (50%) 处应用变换，以便对象向前移动。我将如何将其推回以使正面匹配 200 像素？

谢谢

【问题讨论】：

看看getBoundingClientRect 是否有帮助。在为您提供尺寸、位置等时，它会考虑变换。
jsfiddle.net/K99GS

标签： css 3d transform

【解决方案1】：

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

无论如何，我猜你当前的图像是 200 像素？

然后考虑到（来自您的链接）：

3D 图像滑块
请注意，由于立方体的工作方式，图像移向屏幕，并且比应有的更大。你应该将其向后移动图像宽度的一半以确保它是正常大小。

如果您将立方体向后平移 100 像素（宽度的一半），您的图像将正好是 200 像素。

如果您的图片不是 200 像素，请务必发布您的代码

【讨论】：

好的，这是小提琴：jsfiddle.net/K99GS 我试着把它向后推，但它改变了枢轴，所以它从错误的原点旋转......

【解决方案2】：

好的，这是小提琴：jsfiddle.net/K99GS 我尝试将它向后推，但它改变了枢轴，因此它从错误的原点旋转......

【讨论】：

【解决方案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/

【讨论】：