设置 CSS3 伪 3d 对象的变换原点答案

【问题标题】：Setting a transform-origin of a CSS3 pseudo 3d object设置 CSS3 伪 3d 对象的变换原点
【发布时间】：2014-07-25 18:27:04
【问题描述】：

我正在尝试构建一个“伪 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%;
}

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

这里是 codepen 项目的链接： http://codepen.io/gbnikolov/pen/qyfzp

【问题讨论】：

标签： javascript css

【解决方案1】：

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

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

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

见[ THIS ]

【讨论】：

谢谢，非常感谢！我不知道你可以在变换原点使用 Z 轴...
@GeorgiB.Nikolov，很高兴为您提供帮助。