Question

请检查一下这个例子：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/

感谢您的帮助

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

双轴旋转在css 3d旋转中碰撞

1 个答案: