CSS 3D变换旋转:原点在第一个变换上移动

Question

我已经创建了一个三维carouse。它通过将transform: rotateY和translate应用于父对象，将内容排列在沿y轴旋转的水平圆中。

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

复制于：

• Chrome 38 OSX
• Chrome 38 Win7
• Firefox 30操作系统
• 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

附言：你介意我把这个放在我的实验文件夹里吗：）？这太酷了！

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>