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

淡淡的烟草味﹌ 2022-05-24 13:08 379阅读 0赞

参考博客：[ 张鑫旭][Link 1]

我们先来看一下效果：

![70][]

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

简单介绍一下。

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

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

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

几张图片都挤在一起了。

![70 1][]

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

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

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

[图片][Link 2]

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

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

html:

<body > 
       <div class='wrap'>
         <div class='inner' style="transform:rotateY(0deg)">
             <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class='picture' style="transform:rotateY(0deg) translateZ(123.923px)" >
             <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" class='picture' style="transform:rotateY(60deg)  translateZ(123.923px)" >
             <img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" class='picture' style="transform:rotateY(120deg)  translateZ(123.923px)">
             <img src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" class='picture' style="transform:rotateY(180deg) translateZ(123.923px)">
             <img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" class='picture' style="transform:rotateY(240deg)  translateZ(123.923px)" >
             <img src="http://image.zhangxinxu.com/image/study/s/s128/mm7.jpg" class='picture' style="transform:rotateY(300deg)  translateZ(123.923px)">
         </div>
       </div>
       <script tyle='text/javascript'>
           var inner=document.getElementsByClassName('inner')[0];
           inner.οnclick=function(e) {
             //this.style.rotateY=parseInt(this.style.rotateY)+60+'deg';
             var reg=/\d{1,}/;
             var num=this.style.transform.toString().match(reg)[0];
             console.log(num);
             num=parseInt(num)+60;
             this.style.transform='rotateY('+num+'deg)';
           }
       </script>
    </body>

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;
    }

[Link 1]: http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-6/#comments
[70]: /images/20220524/cc779dc37250471f93c56c69dae07708.png
[70 1]: /images/20220524/7e4ef39ab6724ab78903f3c840b339eb.png
[Link 2]: http://image.zhangxinxu.com/image/blog/201209/diagram.png