CSS实现旋转木马

Idpd.Boy

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

阅读量270

点赞数

文章标签： css css3 html

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

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

版权

实现旋转木马的思路

创建一个大盒子，里面放若干个小盒子
为小盒子设置绝对定位，大盒子设置相对定位
第一张沿着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(