CSS 3D轉換旋轉：原點正在移動第一個轉換

Question

我創建了3D carouse。它通過將transform: rotateY和translate應用於父級，將內容安排在沿y軸旋轉的水平圓圈中。

問題是轉換原點似乎移動，但只在第一個轉換。在隨後的旋轉中，原點應該保持在中心位置。

轉載於：

• 鉻38 OSX
• 鉻38的Win7
• 火狐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：你不介意我把這個在我的實驗文件夾:)？這很酷！

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>