设置CSS3伪3d对象的transform-origin

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度旋转。我想在每次用户按左或右时围绕它旋转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%;
}

但是当左箭头或右箭头被按下时，幻灯片开始笨拙地绕着它的一侧旋转，所以transform-origin不能做到这一点。

下面是codependency项目的链接:http://codepen.io/gbnikolov/pen/qyfzp

Answer 1

2题!
首先，当你翻译你的包装-720px在Z轴，所以必须翻译你的原点-720px在Z轴!

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

第二个问题是
wrapper.style.webkitTransform +=是错的!因为在每次按下键时，它的值都会被复制!
目前我修复它，但它不是一个很好的方式来旋转它!

参见[THIS]