Question

我已根据此示例创建了一个多维数据集。 http://css3.bradshawenterprises.com/transforms/#cubecarousel

我需要了解的是如何才能获得面对面的精确度量（例如200px）？

通常您定义立方体的面，然后在对象的一半（50％）处应用变换，以便对象向前移动。我怎么把它推回来让面对面匹配200px？

谢谢

Answer 1

您应该发布当前的代码。

无论如何，我猜您当前的图片是200px？

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

3D图像滑块
请注意，由于多维数据集的工作方式，图像被移出屏幕，并且比它应该更大。您应该将它移回图像宽度的一半以确保它是正常大小。

如果您将立方体向上平移100px（宽度的一半），则图像将精确地为200px。

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

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

在行动中查看 - ＆gt; http://jsfiddle.net/K99GS/5/

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

3 个答案: