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

最新推荐文章于 2024-03-19 12:10:10 发布

wust_cyl

最新推荐文章于 2024-03-19 12:10:10 发布

阅读量3.9k

点赞数 4

分类专栏： HTML/CSS 文章标签：图片旋转木马3D效果

本文链接：https://blog.csdn.net/wust_cyl/article/details/80474424

版权

HTML/CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

参考博客：张鑫旭

我们先来看一下效果：

还不错咯，这个主要是利用了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:

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

wust_cyl

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
css-图片旋转木马3D效果

参考博客：张鑫旭我们先来看一下效果：还不错咯，这个主要是利用了css3里面的transform属性。简单介绍一下。总共分成3层，外层div是舞台设置perspective属性，里层div是容器开启transform-style:preserve-3d;我们给里层div里面放入6张图片，然后设置position:absolute,定位到底部。6张图片围成一圈（360度），那么每张图片沿Y方向旋转6...
复制链接

扫一扫