javascript - 设置 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>

基本上，所有每张卡片都设置为 position: absolute;我将它们旋转 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%;
}

但是当按下向左或向右箭头时，幻灯片开始绕着它的一侧笨拙地旋转，所以 transform-origin 不起作用。

这是 codepen 元素的链接: http://codepen.io/gbnikolov/pen/qyfzp

Answer 1

2个问题!
首先，当你在 Z 轴上平移你的包装器 -720px 时，所以也必须在 Z 轴上平移你的原点 -720px!

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

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

参见 [ THIS ]