CSS 3D变换旋转：原点在第一次过渡时移动

Question

我创建了一个 3D 旋转木马。它通过将transform: rotateY 和translate 应用到父级，将内容排列在沿y 轴旋转的水平圆圈中。

问题是变换原点似乎在移动，但仅在第一次转换时。在随后的旋转中，原点应保持在中心。

转载于：

• Chrome 38 OSX
• Chrome 38 Win7
• Firefox 30 OSX
• Safari 7.0.6 OSX

IE 10 (Win7) 有一个不同的错误：它在第一次转换时围绕 x 轴旋转。

笔：http://codepen.io/tricki/full/BGuwo

点击“旋转”：原点在过渡期间移动 点击“再次旋转”：原点不动 再次点击“旋转”：原点不动

起初我认为这是一个浏览器错误，但 Firefox 也有同样的问题让我怀疑。 谁能看到我犯的错误或确认这实际上是浏览器错误？

HTML：

<div id="parent">
    <div class="card card-1"></div>
    <div class="card card-2"></div>
    <div class="card card-3"></div>
    <div class="card card-4"></div>
    <div class="card card-5"></div>
    <div class="card card-6"></div>
    <div class="card card-7"></div>
    <div class="card card-8"></div>
    <div class="card card-9"></div>
    <div class="card card-10"></div>
</div>

CSS：

#parent {
    background: red;
    height: 300px;
    width: 300px;
    margin: auto;

    transform-style: preserve-3d;
    transform-origin: center center -461px;
    transform: translate3d(0, 0, -461px);
}

#parent.active {
    transition: transform 5s linear;
    transform:rotateY(-144deg) translate3d(0px, 0px, -461px);
}

#parent.active2 {
    transition: transform 5s linear;
    transform:rotateY(-288deg) translate3d(0px, 0px, -461px);
}

.card {
    background: blue;
    border: 1px solid green;
    position: absolute;
    backface-visibility: hidden;

    opacity: .5;
    height: 100%;
    width: 100%;
}

.card-1  { transform: rotateY( 0deg )   translate3d(0, 0, 461px ); }
.card-2  { transform: rotateY( 36deg )  translate3d(0, 0, 461px ); }
.card-3  { transform: rotateY( 72deg )  translate3d(0, 0, 461px ); }
.card-4  { transform: rotateY( 108deg ) translate3d(0, 0, 461px ); }
.card-5  { transform: rotateY( 144deg ) translate3d(0, 0, 461px ); }
.card-6  { transform: rotateY( 180deg ) translate3d(0, 0, 461px ); }
.card-7  { transform: rotateY( 216deg ) translate3d(0, 0, 461px ); }
.card-8  { transform: rotateY( 252deg ) translate3d(0, 0, 461px ); }
.card-9  { transform: rotateY( 288deg ) translate3d(0, 0, 461px ); }
.card-10 { transform: rotateY( 324deg ) translate3d(0, 0, 461px ); }

Answer 1

删除#parent 上的-461px 原点移位和Z 轴平移就足以解决您的问题。

当你已经移动了要移动的元素时，你不应该移动你的变换原点：“幻灯片”已经相对于你的#parent 的 z=0 点定位。所以#parent的旋转也应该相对于这一点进行。

笔：http://codepen.io/anon/pen/nAeDc

PS：你介意我把它保存在我的 Experiments 文件夹中吗：）？这很酷！

var parent = document.getElementById('parent');

var degree = 0;

document.getElementById('rotate').addEventListener('click', function() {
  parent.style.transform = "rotateY(" + (degree+=36) + "deg)";
});
document.getElementById('active').addEventListener('click', function() {
    parent.style.transform = "";
    parent.classList.remove('active2');
    parent.classList.add('active');
});
document.getElementById('active2').addEventListener('click', function() {
    parent.style.transform = "";
    parent.classList.remove('active');
    parent.classList.add('active2');
});

#parent {
    height: 300px;
    width: 300px;
    margin: auto;
    
    transform-style: preserve-3d;
    transform-origin: center center 0;

    transition: transform 1s linear;
}

#parent:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -3px;
  background: red;
}

#parent.active {
    transform: rotateY(-144deg);
}

#parent.active2 {
    transform: rotateY(-288deg);
}

.card {
    background: blue;
    border: 1px solid green;
    position: absolute;
    backface-visibility: hidden;
    
    opacity: .5;
    height: 100%;
    width: 100%;
}

.card-1  { transform: rotateY( 0deg )   translate3d(0, 0, 461px ); }
.card-2  { transform: rotateY( 36deg )  translate3d(0, 0, 461px ); }
.card-3  { transform: rotateY( 72deg )  translate3d(0, 0, 461px ); }
.card-4  { transform: rotateY( 108deg ) translate3d(0, 0, 461px ); }
.card-5  { transform: rotateY( 144deg ) translate3d(0, 0, 461px ); }
.card-6  { transform: rotateY( 180deg ) translate3d(0, 0, 461px ); }
.card-7  { transform: rotateY( 216deg ) translate3d(0, 0, 461px ); }
.card-8  { transform: rotateY( 252deg ) translate3d(0, 0, 461px ); }
.card-9  { transform: rotateY( 288deg ) translate3d(0, 0, 461px ); }
.card-10 { transform: rotateY( 324deg ) translate3d(0, 0, 461px ); }

<div id="parent">
    <div class="card card-1">1</div>
    <div class="card card-2">2</div>
    <div class="card card-3">3</div>
    <div class="card card-4">4</div>
    <div class="card card-5">5</div>
    <div class="card card-6">6</div>
    <div class="card card-7">7</div>
    <div class="card card-8">8</div>
    <div class="card card-9">9</div>
    <div class="card card-10">10</div>
</div>
<button id="rotate">Rotate 1step</button>
<button id="active">Rotate</button>
<button id="active2">Rotate again</button>