設置CSS3偽3d對象的轉換原點

Question

我正在嘗試構建一個“偽3D” CSS3幻燈片來保存我網站的項目。

我為每個元素提供的代碼是

<div class="projects">                  
  <div class="wrapper">
    <section id="widget_sp_image-8" class="widget widget_sp_image">
       <h1 class="widget-title">Live Manager</h1>
       <div class="widget_sp_image-description">
       <p>Lorem ipsum</p>
       </div>
     </section>
     <!-- And so on -->
   </div>
</div>

基本上，每張卡都設置在以下位置：絕對； 然后將它們繞360度寬度的Javascript旋轉。 我想每次用戶向左或向右按​​下時將其自身繞45度旋轉，但是我很難設置它的變換原點。 我有這樣的代碼：

.projects .wrapper {
    width: 470px;
    display: block;
    margin: 0 auto;
    position: relative;

    -webkit-transform: translateZ(-700px);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50%;
}

但是，當按下向左或向右箭頭時，幻燈片開始繞其側面尷尬地旋轉，因此變換原點無法解決問題。

這是Codepen項目的鏈接： http ://codepen.io/gbnikolov/pen/qyfzp

Answer 1

2個問題！
首先，當您在Z軸上平移包裝紙-720px時，因此也必須在Z軸上平移原點-720px！

.wrapper {
  -webkit-transform-origin: 50% 50% -700px;
}

第二個問題是：
wrapper.style.webkitTransform +=錯誤！ 因為在每個按鍵中按下它的值都會被復制！
目前，我已修復它，但這不是旋轉它的好方法！

見[此]