CSS立方体，无法与网格对齐

所以我的目标是把这些立方体放在一个网格上，让它们排成一行，可以拖动，可以捕捉。我得到的立方体工作良好的基础上，但我没有完全理解一些力学，因此我有一些问题

立方体开始时比旋转后更大。要看到这一点，只需单击“1”，它应用了“ShowFront”类，而您仍然在前面。它会立即收缩固定

立方体轴不居中，因此当它旋转时，它会以不同的xy坐标结束

在CSS中，我将大小设置为200x200（或25的任意因子），但由于Z变换，它并不完全正确这一个基本上是固定的，请参见底部的更新。

我怎样才能解决这三件事

这是小提琴：

以下是CSS，它是重要的部分：

    .itemView {
      width: 200px;
      height: 200px;
      /*position: relative;*/
      /*margin: 0 auto 40px;*/
      /*border: 1px solid #CCC;*/
      -webkit-perspective: 1000px;
         -moz-perspective: 1000px;
           -o-perspective: 1000px;
              perspective: 1000px;
        -webkit-margin-start: 0 !important;
        -webkit-margin-before: 0 !important;
        -webkit-margin-end: 0 !important;
        -webkit-margin-after: 0 !important;
    }

    .cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }

    .cube figure {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
      color: white;
    }

    .cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    .cube .front  {     
        background-color: #555;
        border: 1px solid #ccc; 
    }
    .cube .back   {
        background-color: #555;
        border: 1px solid #ccc; 
    }
    .cube .right  { 
        background-color: #555;
        border: 1px solid #ccc; 
    }
    .cube .left   { 
        background-color: #555;
        border: 1px solid #ccc; 
     }
    .cube .top    {
        background-color: cornflowerblue;
        border: 1px solid #ccc; 
     }
    .cube .bottom { 
        background-color: #555;
        border: 1px solid #ccc; 
     }

    .cube .front  {
      -webkit-transform: translateZ( 99px );
    }
    .cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 99px );
    }
    .cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 99px );
    }
    .cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 99px );
    }
    .cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 99px );
    }
    .cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 99px );
    }

    .cube.show-front {
      -webkit-transform: translateZ( -99px );
    }
    .cube.show-back {
      -webkit-transform: translateZ( -99px ) rotateX( -180deg );
    }
    .cube.show-right {
      -webkit-transform: translateZ( -99px ) rotateY(  -90deg );
    }
    .cube.show-left {
      -webkit-transform: translateZ( -99px ) rotateY(   90deg );
    }
    .cube.show-top {
      -webkit-transform: translateZ( -99px ) rotateX(  -90deg );
    }
    .cube.show-bottom {
      -webkit-transform: translateZ( -99px ) rotateX(   90deg );
    }

.itemHandle {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    cursor: move;
    white-space: nowrap;
    background-color: cornflowerblue;
    text-align: left;
    /*border-top-right-radius: 15px;*/
}

另外，如果有人觉得这些问题应该是分开的，那也没关系。我只是觉得他们都是同一个“问题”的一部分，这比把同一把小提琴放三次要容易得多

第1、3期更新

我能够将前面的transformZ更改为0，并调整其余的变换，使立方体的前面与“工作区”位于同一平面上。这要好得多，但透视图有点偏了，好像你没有正面看立方体。但不明显，除非面是半透明的。以下是更新后的CSS：

.cube .front  {
  -webkit-transform: translateZ( 0px );
}
.cube .back   {
  -webkit-transform: rotateX( -180deg ) translateZ( 200px );
}
.cube .right {
  -webkit-transform: rotateY(   90deg ) translateZ( 100px ) translateX(100px);
}
.cube .left {
  -webkit-transform: rotateY(  -90deg ) translateZ( 100px ) translateX(-100px);
}
.cube .top {
  -webkit-transform: rotateX(   90deg ) translateZ( 100px ) translateY(-100px);
}
.cube .bottom {
  -webkit-transform: rotateX(  -90deg ) translateZ( 100px ) translateY(100px);
}

---

由于页边空白和填充，这些数字不正确

尝试：

添加的边距和填充=0

我现在已经改变了整个坐标系。如果使立方体中心位于0坐标，则更容易。现在所有旋转的东西只需要旋转，这更容易理解

---

如果您确实将正面设置为在z=0平面上，请在基准面设置一个全局偏移。

我删除了除Chrome特定供应商之外的所有CSS，因为这是我正在调试的内容。太混乱了。在我的回答中添加了一个例子，希望这是你想要的，太棒了！只要我能把它整合起来，我就接受。谢谢这有一个问题，因为人脸使用了translateZ（100），就像整个立方体被放大了一样。理想情况下，我希望这些面与背景平面保持水平。我已经把整个立方体移回去了，所以这是真的，但是现在它在另一个轴上旋转。思想？这里有一个更新的提琴：废话，我刚刚读了你文章的结尾，对不起。。。让我玩一下，所以我添加了translateZ（-200px）；到.cube，它开始时是正确的，但当它旋转时，它会再次“放大”。我将打开一个新问题，因为你让我达到95%，而这个问题现在非常复杂。

.cube figure {
     display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    border: 0px solid black;
    color: white;
    margin: 0px;
    padding: 0px;
  }