CSS练习 | 旋转3D立方体

最新推荐文章于 2024-09-28 22:57:04 发布

猪头人的机车暴力美学

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量155

点赞数 1

分类专栏：前端 VScode 文章标签： css3 html html5

本文链接：https://blog.csdn.net/hyw980929/article/details/116250365

版权

VScode 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

该博客展示了如何使用HTML和CSS创建一个3D立方体，并应用动画使其上的六个面轮流显示。代码中详细定义了立方体及其各面的样式，通过transform属性设置旋转角度，同时使用@keyframes实现3D旋转效果。博客内容适合前端开发者学习理解CSS3 3D变换和动画技术。

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

完成效果图：
在这里插入图片描述
代码分享：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="./images">
        <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>hhh</title>
        <style>
            html{
                 perspective: 800px;
                }

            .cube{
                width: 200px;
                height: 200px;
                /* background-color: pink; */
                margin: 100px auto;
                /* 设置3D变形 */
                transform-style: preserve-3d;
                transform: rotateX(45deg) rotateZ(45deg);

                animation: test3d 2s infinite linear;
            }
            .cube>div{
                width: 200px;
                height: 200px;
                /* 透明效果 */
                opacity: 0.7;
                position: absolute;
            }
            img{
                vertical-align: top;
            }

            .box1{
                transform: rotateY(90deg) translateZ(100px);
            }
            .box2{
                transform: rotateY(-90deg) translateZ(100px);
            }
            .box3{
                transform: rotateX(90deg) translateZ(100px);
            }
            .box4{
                transform: rotateX(-90deg) translateZ(100px);
            }
            .box5{
                transform:rotateY(180deg) translateZ(100px);
            }
            .box6{
                transform:rotateY(0deg) translateZ(100px);
            }

            @keyframes test3d{
                from{
                    transform: rotateX(0deg) rotateZ(0deg);
                }

                to{
                    transform: rotateX(360deg) rotateZ(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="cube">
            <div class="box1">
                <img src="./img/复仇1.jpg">
            </div>
        
             <div class="box2">
                <img src="./img/复仇2.jpg">
            </div>
    
            <div class="box3">
                <img src="./img/复仇3.jpg">
            </div>

            <div class="box4">
                <img src="./img/复仇4.jpg">
            </div>
            <div class="box5">
                <img src="./img/复仇5.jpg">
            </div>

            <div class="box6">
                <img src="./img/复仇6.jpg">
            </div>
        </div>
    </body>
</html>