Question

我创造了一个3D carouse。它通过将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

删除-461px上的#parent原点移位和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>

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

1 个答案: