javascript - 设置CSS3伪3d对象的转换原点

我正在尝试构建“伪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

最佳答案

2个问题！
首先，当您在Z轴上平移包装纸-720px时，因此也必须在Z轴上平移原点-720px！

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

第二个问题是：
wrapper.style.webkitTransform +=是错误的！因为在每个按键中按下它的值都会被复制！
目前，我已修复它，但这不是旋转它的好方法！

见[ THIS ]

关于javascript - 设置CSS3伪3d对象的转换原点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24962236/