CSS3实现旋转立方体特效

最新推荐文章于 2020-01-06 09:49:36 发布

Inspiring_

最新推荐文章于 2020-01-06 09:49:36 发布

阅读量287

点赞数 1

CC 4.0 BY-SA版权

文章标签： CSS3实现立方体旋转特效 css3动画

本文链接：https://blog.youkuaiyun.com/weixin_44021199/article/details/97671197

本文介绍了一个使用HTML和CSS实现的3D立方体旋转动画，通过设置不同的透视角度和旋转变换，创建了一个六面体的3D效果，并使用关键帧动画使其持续旋转。

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

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background: black;
            perspective: 800px;
        }
        #container{
            width: 200px;
            height: 200px;
            margin:200px auto;
            /* border:1px dotted #fff; */
            position: relative;
            transform-style: preserve-3d;
            animation: run 2s linear infinite forwards;
        }
        @keyframes run{
            100%{
                transform: rotateY(360deg) ;
            }

        }
    #container div{
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.5);
        border-radius: 10px;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left:0px;
        top:0px; 
    }
    .one{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .two{
        transform: rotateY(90deg) translateZ(100px);
    }
    .three{
        transform: rotateX(90deg) translateZ(100px);
    }
    .four{
        transform: rotateX(-90deg) translateZ(100px);

    }
    .five{
        transform: rotateY(180deg) translateZ(100px);
    }
    .six{
        transform: translateZ(100px);
    }
   
    </style>
</head>
<body>
    <div id="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>  
    
</body>
</html>

在这里插入图片描述