炫酷的动画特效—css3旋转立方球体

最新推荐文章于 2024-07-04 15:38:12 发布

weixin_44358802

最新推荐文章于 2024-07-04 15:38:12 发布

阅读量677

点赞数 1

分类专栏： css3动画文章标签： css3

本文链接：https://blog.csdn.net/weixin_44358802/article/details/104600919

版权

css3动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

炫酷的动画特效—css3旋转立方球体

想要实现旋转立方球体特效，以下的内容你不容错过。
要理解的知识点

形成一个3D空间： transform-style:preserve-3d （让父元素形成3D，让其子元素在3D空间进行变化）
动画 animation
特点：不需要事件进行触发，调用关键帧即可
常用的写法：animation:关键帧的名称动画运动的时间 linear(匀速) 动画延迟的时间；
3D的旋转
transform:rotate();
rotateX()
rotateY()
rotateZ()
rotate3D()
rotate3D(x,y,z,a) [ 0不旋转，1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

制定关键帧：
@keyframes 关键帧的名称{
0%{
//开始状态
}
25%{

  }
     50%{

     }
     ...
     100%{
         //结束状态
     }
 }

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        body{
            background:#000;
        }
        .box{
            width:400px;
            height:400px;
            /* 固定定位，让球体在浏览器窗口左右上下居中 */
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            /* 形成3D场景 */
            transform-style: preserve-3d;
            /* 倾斜一个角度，例如绕x轴旋转50度，绕y轴旋转25度 */
            transform:rotateX(50deg) rotateY(25deg);
            /* 调用关键帧，使球体按照每10s一圈匀速不停转动*/
            animation:ulRotate  10s linear infinite;
        }
        .box li{
            width:398px;
            height:398px;
            border:1px solid blue;
            /* 形成一个正圆 */
            border-radius: 100%;
            /* 将圆以定位的形式叠加在一起 */
            position:absolute;
        }
        /*本来所有的圆叠加在一起，我们设置rotateX分别取值20,40,60...180,所有的圆会变成绕x轴的球体  */
        .rotateX1{
            transform:rotateX(20deg);
        }
        .rotateX2{
            transform:rotateX(40deg);
        }
        .rotateX3{
            transform:rotateX(60deg);
        }
        .rotateX4{
            transform:rotateX(80deg);
        }
        .rotateX5{
            transform:rotateX(100deg);
        }
        .rotateX6{
            transform:rotateX(120deg);
        }
        .rotateX7{
            transform:rotateX(140deg);
        }
        .rotateX8{
            transform:rotateX(160deg);
        }
        .rotateX9{
            transform:rotateX(180deg);
        }
        /* 类似的，增加绕y轴的球体 */
         .rotateY1{ 
            transform:rotateY(20deg);
        }
        .rotateY2{
            transform:rotateY(40deg);
        }
        .rotateY3{
            transform:rotateY(60deg);
        }
        .rotateY4{
            transform:rotateY(80deg);
        }
        .rotateY5{
            transform:rotateY(100deg);
        }
        .rotateY6{
            transform:rotateY(120deg);
        }
        .rotateY7{
            transform:rotateY(140deg);
        }
        .rotateY8{
            transform:rotateY(160deg);
        }
        .rotateY9{
            transform:rotateY(180deg);
        } 

        /* 制定关键帧 */
        @keyframes ulRotate{
            /* 开始状态 */
            0%{
                transform:rotateX(50deg) rotateY(25deg) rotateZ(0deg);
            }
            /* 结束状态 */
            100%{
                transform:rotateX(50deg) rotateY(25deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <ul class="box">
        <li class="rotateX1"></li>
        <li class="rotateX2"></li>
        <li class="rotateX3"></li>
        <li class="rotateX4"></li>
        <li class="rotateX5"></li>
        <li class="rotateX6"></li>
        <li class="rotateX7"></li>
        <li class="rotateX8"></li>
        <li class="rotateX9"></li>

        <li class="rotateY1"></li>
        <li class="rotateY2"></li>
        <li class="rotateY3"></li>
        <li class="rotateY4"></li>
        <li class="rotateY5"></li>
        <li class="rotateY6"></li>
        <li class="rotateY7"></li>
        <li class="rotateY8"></li>
        <li class="rotateY9"></li>
    </ul>
</body>
</html>

效果图：
在这里插入图片描述

weixin_44358802

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
炫酷的动画特效—css3旋转立方球体

炫酷的动画特效—css3旋转立方球体想要实现旋转立方球体特效，以下的内容你不容错过。要理解的知识点形成一个3D空间： transform-style:preserve-3d （让父元素形成3D，让其子元素在3D空间进行变化）动画 animation特点：不需要事件进行触发，调用关键帧即可常用的写法：animation:关键帧的名称动画运动的时间 linear(匀速) ...
复制链接

扫一扫