html - 两轴旋转​​在CSS 3D旋转中发生碰撞

请检查该示例：https://jsfiddle.net/ndp0w3L1/2/embedded/result/

如果在示例中将第二个骰子在y轴上沿section.diceswrap旋转至90度：transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);其余轴上的旋转相同，则它将碰撞并且仅向上和向下旋转。

这是在FF和webkit中。
我是否错过了某些内容，因为看来旋转实际上是2D实施的，而没有真正的3D，并且如果以直角翻转平面，其余的轴也会发生碰撞。

HTML：

<div class="dice_container">
  <section id="done" class="diceswrap">
    <div class="dice">
      <section class="dice_plane">
        <div class="face one zindx1">
          <span></span>
        </div>
        <div class="face two">
          <span></span>
          <span></span>
        </div>
        <div class="face three"> <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="face four"> <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="face five">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="face six">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </section>
    </div>
  </section>
</div>

CSS：

body, pre {
  font: normal normal normal 100 % /20px Arial, Helvetica, sans-serif;
}
.dice_container {
  padding: 10 % ;
  text - align: center;
  background - color: #333;
}
.diceswrap {
    width: 178px;
    height: 178px;
    display: inline-block;
}
.dice {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    position: relative;
}
.face {
    padding: 12px;
    width: 104px;
    height: 104px;
    display: block;
    position: absolute;
    box-sizing: border-box;
    background-color: # e7e7e7;
  border: 1 px solid# ccc;
}
.face span {
  width: 24 px;
  height: 24 px;
  display: block;
  position: absolute;
  background - color: #333;
  box-shadow: inset 0 3px # 111,
  inset 0 - 3 px #555;
}
.one span {
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
}
.two span:nth-of-type(1) {
    left: 12px;
}
.two span:nth-of-type(2) {
    top: 68px;
    left: 68px;
}
.three span:nth-of-type(1) {
    left: 12px;
}
.three span:nth-of-type(2) {
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
}
.three span:nth-of-type(3) {
    top: 68px;
    left: 68px;
}
.four span:nth-of-type(1) {
    left: 12px;
}
.four span:nth-of-type(2) {
    left: 68px;
}
.four span:nth-of-type(3) {
    top: 68px;
    left: 12px;
}
.four span:nth-of-type(4) {
    top: 68px;
    left: 68px;
}
.five span:nth-of-type(1) {
    left: 12px;
}
.five span:nth-of-type(2) {
    left: 68px;
}
.five span:nth-of-type(3) {
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
}
.five span:nth-of-type(4) {
    top: 68px;
    left: 12px;
}
.five span:nth-of-type(5) {
    top: 68px;
    left: 68px;
}
.six span:nth-of-type(1) {
    left: 12px;
}
.six span:nth-of-type(2) {
    left: 68px;
}
.six span:nth-of-type(3) {
    top: 50%;
    left: 12px;
    margin: -12px 0 0 0;
}
.six span:nth-of-type(4) {
    top: 50%;
    left: 68px;
    margin: -12px 0 0 0;
}
.six span:nth-of-type(5) {
    top: 68px;
    left: 12px;
}
.six span:nth-of-type(6) {
    top: 68px;
    left: 68px;
}
.dice {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.5s linear;
}
.dice_plane {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.4s linear;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    width: 100%;
    height: 100%;
}
.ftwo .dice_plane {
    transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg) !important;
}
.fthree .dice_plane {
    transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) !important;
}
.ffour .dice_plane {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) !important;
}
.ffive .dice_plane {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg) !important;
}
.fsix .dice_plane {
    transform: rotateX(0deg) rotateY(180deg) rotateZ(0) !important;
}
.one {
    transform: translateZ(52px);
    rotateY(90deg);
}
.six {
    transform: translateZ(-52px);
}
.three {
    transform: translateX(52px) rotateY(90deg);
}
.four {
    transform: translateX(-52px) rotateY(-90deg);
}
.five {
    transform: translateY(52px) rotateX(90deg);
}
.two {
    transform: translateY(-52px) rotateX(-90deg);
}

jsfiddle：http://jsfiddle.net/ndp0w3L1/2/

感谢您的帮助

最佳答案

这是我在研究中发现的：

rotateX和rotateY变换属性都分别绕水平轴和垂直轴旋转对象，第三个rotateZ绕第三矢量旋转。
在rotateX(0deg) rotateY(90deg) rotateZ(0deg)情况下，此向量与X轴在同一平面上，因此X，Y的两个旋转都发生碰撞。

您可以给向量任何方向，这样有问题

rotateX(0deg) rotateY(90deg) rotateZ(0deg)

相当于

rotateX(0deg) rotateY(90deg) rotate3d(0,0,1, 0deg)

在给定的示例中，rotate3d(1,0,0, 0deg)将在3d中恢复旋转。

因此，任何轴都可以采用rotate3d格式