CSS实现旋转木马

Idpd.Boy

已于 2022-12-29 21:55:26 修改

阅读量328

点赞数

文章标签： css css3 html

于 2022-12-29 21:53:24 首次发布

本文链接：https://blog.csdn.net/Idpd_/article/details/128488482

版权

这篇博客介绍如何利用CSS3实现旋转木马的视觉效果。通过创建一个包含多个小盒子的大盒子，设置盒子的相对和绝对定位，以及利用3D变换进行旋转和动画效果，可以达到旋转木马的动态展示。关键在于调整小盒子的旋转角度和Z轴运动，以及为body设置透视距离来营造立体感。

摘要由CSDN通过智能技术生成

实现旋转木马的思路

创建一个大盒子，里面放若干个小盒子
为小盒子设置绝对定位，大盒子设置相对定位
第一张沿着Z轴运动，后续小盒子沿着Y轴递增旋转60度，并且都再顺着Z轴运动
为body设置perspective值，定义 3D 元素距视图的距离
最后一步写动画，让大盒子section沿着Y轴进行旋转

<head>
    <style>
        body {
     
            perspective: 800px;
        }
 
        section {
     
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 200px;
            transform-style: preserve-3d;
            /* 让section旋转 */
            animation: action 10s linear infinite;
            background: url(