html - 两轴旋转​​在css 3d旋转中发生碰撞

Question

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

如果您将 section.diceswrap 在 y 轴上旋转 90 度作为示例中的第二个骰子:变换:rotateX(0deg) rotateY(90deg) rotateZ(0deg); 轴其余部分的旋转是相同的，它会碰撞并且只会上下移动。

这是在 FF 和 webkit 中。 我是否遗漏了一些东西，因为看起来旋转实际上是作为 2D 实现的，没有真正的 3D，如果您以直 Angular 翻转平面，其余轴会发生碰撞。

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/

感谢您的帮助

Answer 1

这是我在研究中发现的:

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格式