css-图片旋转木马3D效果

参考博客： 张鑫旭

我们先来看一下效果：

还不错咯，这个主要是利用了css3里面的transform属性。

简单介绍一下。

总共分成3层，外层div是舞台设置perspective属性，里层div是容器开启transform-style:preserve-3d;

我们给里层div里面放入6张图片，然后设置position:absolute,定位到底部。

6张图片围成一圈（360度），那么每张图片沿Y方向旋转60*k度

几张图片都挤在一起了。

这是我们看不出任何3D效果，这是我们需要利用translateZ属性了。

我们假设这些图片是围绕一个球心的，那么我们要看出效果我们必须设置这些图片里球心的距离，不然就是0，那很显然就是缩在一起了。

图片的距离是 = （图片width/2)*根号3  （px:因为圆心角是60嘛 )+ 20px(空隙）

图片

张鑫旭是9张 所以为360/9=40.道理一样。

自己写的代码，不能和大神比的（可怕）

html:

js部分就是绑定了一个事件，点击图片然后让容器旋转60，那么就相当于换一张图片了。

css:

 *{
     padding:0px;
     border:0px;
 }
 .wrap {
     height:100px;
     width:900px;
    padding:100px 50px;
    perspective:800px;
    background:rgb(203, 207, 203);
 }

 .inner{
     display:flex;
     position:absolute;
     left:40%;
     width:120px;
     height:100px;
     transform-style:preserve-3d;
 }
  
.picture {
    width:120px;
    position:absolute;
    bottom:0;
}