使用html+css实现的旋转木马效果

最新推荐文章于 2025-05-01 11:28:44 发布

小邢学前端

最新推荐文章于 2025-05-01 11:28:44 发布

阅读量3.3k

点赞数 4

分类专栏：前端小案例文章标签： html css css3 html5 javascript

本文链接：https://blog.youkuaiyun.com/xingstudent/article/details/118892652

版权

本文通过HTML和CSS实现了一个3D立体图片轮播效果。通过设置父元素的透视、相对定位以及子元素的绝对定位、旋转和位移，实现了六张图片在3D空间中旋转展示。当鼠标悬停在父元素上时，轮播动画暂停。关键代码包括动画关键帧定义、各图片的旋转和位移设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构

效果图
最终效果可自行调整

先给一个section父盒子
在给里面放入6个div 对应你想放置图片的张数这里放六张图片

   <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

样式

先给父盒子加上透视

 body {
   
     perspective: 1000px;
 }

在给section设置样式

因为需要给子盒子div添加定位所以这里给父盒子添加相对定位（子绝父相）设置盒子的大小及位置

section {
   
            position: relative;
            width: 300px;
            height: 200px;
            margin: 350px auto;
     		/* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
    		/*设置背景图片   不平铺*/
            background: url(media/pig.jpg) no-repeat;
        }

section:hover {
   
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }