通过transform，纯css写出3d环绕效果

最新推荐文章于 2024-07-15 16:36:52 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-07-15 16:36:52 发布

阅读量1.3k

点赞数

分类专栏：特效

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/117778847

版权

特效专栏收录该内容

31 篇文章 2 订阅

订阅专栏

实现原理：

transform: rotateY(60deg) translateZ(300px)
通过rotateY使元素围绕Y轴旋转，translateZ拉开Z轴的距离，更有立体感
本案例通过将圆分为6等分，各自转一圈，只是起点相差60度

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

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字3D环绕</title>
    <style>
        div[class^='test'] {
            position: absolute;
            top: 0;
            left: 0;
            padding: 5px 10px;
            border-radius: 10px;
            color: #fff;
            box-shadow: 2px 2px 10px rgba(105, 105, 105, 0.7);
            
        }

        .test1 {
            animation: rotate 10s linear infinite;
            backface-visibility: hidden;
            background: linear-gradient(45deg, #fccb90 0%, #d57eeb 100%);
        }

        .test2 {
            animation: rotate2 10s linear infinite;
            backface-visibility: hidden;
            background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
        }

        .test3 {
            animation: rotate3 10s linear infinite;
            backface-visibility: hidden;
            background: linear-gradient(45deg, #ebc0fd 0%, #d9ded8 100%);
        }

        .test4 {
            animation: rotate4 10s linear infinite;
            backface-visibility: hidden;
            background: linear-gradient(45deg, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
        }

        .test5 {
            animation: rotate5 10s linear infinite;
            backface-visibility: hidden;
            background: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
        }

        .test6 {
            animation: rotate6 10s linear infinite;
            backface-visibility: hidden;
            background: linear-gradient(45deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
        }

        @keyframes rotate {
            from {
                transform: rotateY(0deg) translateZ(300px);
            }

            to {
                transform: rotateY(360deg) translateZ(300px);
            }
        }

        @keyframes rotate2 {
            from {
                transform: rotateY(60deg) translateZ(300px);
            }

            to {
                transform: rotateY(420deg) translateZ(300px);
            }
        }

        @keyframes rotate3 {
            from {
                transform: rotateY(120deg) translateZ(300px);
            }

            to {
                transform: rotateY(480deg) translateZ(300px);
            }
        }

        @keyframes rotate4 {
            from {
                transform: rotateY(180deg) translateZ(300px);
            }

            to {
                transform: rotateY(540deg) translateZ(300px);
            }
        }

        @keyframes rotate5 {
            from {
                transform: rotateY(240deg) translateZ(300px);
            }

            to {
                transform: rotateY(600deg) translateZ(300px);
            }
        }

        @keyframes rotate6 {
            from {
                transform: rotateY(300deg) translateZ(300px);
            }

            to {
                transform: rotateY(660deg) translateZ(300px);
            }
        }
    </style>
</head>

<body>
    <div style="width: 500px; position:absolute;top:40%;left:50%;transform:translateX(-50%)">
        <div class="test1">楼控系统 </div>
        <div class="test2">功能系统 </div>
        <div class="test3">xx系统</div>
        <div class="test4">dd系统</div>
        <div class="test5">aa系统</div>
        <div class="test6">ww系统</div>
    </div>
</body>

</html>

爱吃烧鸭蛋的叶安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过transform，纯css写出3d环绕效果

实现原理：transform: rotateY(60deg) translateZ(300px)通过rotateY使元素围绕Y轴旋转，translateZ拉开Z轴的距离，更有立体感本案例通过将圆分为6等分，各自转一圈，只是起点相差60度效果：完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
复制链接

扫一扫

专栏目录