Question

我正在尝试构建一个＆＃34;伪3D＆＃34; 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

Answer 1

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

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

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

请参阅[ THIS ]

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

1 个答案: