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张 所以为