H5+CSS3制作3d旋转立方体

最新推荐文章于 2024-02-25 16:28:56 发布

岳清流云

最新推荐文章于 2024-02-25 16:28:56 发布

阅读量983

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： 3d html5 css3

本文链接：https://blog.youkuaiyun.com/tdl081071tdy/article/details/90665825

前端专栏收录该内容

13 篇文章

订阅专栏

博客展示了某种效果，并给出了实现该效果的完整代码，涉及3D、HTML5和CSS3等信息技术领域内容。

摘要生成于 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>Rotating cube</title>
    <style>
        *{margin:0;padding:0}
        body{
            background:linear-gradient(to bottom,#e74c3c,#16a085,#2980b9)
        }
        .wrap{
            display:flex;
            justify-content: center;
            height:100vh;
            align-items: center;
        }
        .cube{
            width:200px;
            height:200px;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateY(0deg) rotateX(-45deg) rotateZ(-45deg);
            animation: cube 5s linear infinite;
        }
        .cube .side{
            width: 100%;
            height: 100%;
            border: solid 1px black;
            position: absolute;
            box-sizing: border-box;
            padding: 10px;
            background-color:#ffffff6b
        }
        .cube .cube-front{
            transform: rotateY(0deg) translateZ(100px);
        }
        .cube .cube-back{
            transform: rotateY(180deg) translateZ(100px);
        }
        .cube .cube-left{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube .cube-right{
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube .cube-top{
            transform: rotateX(90deg) translateZ(100px);
        }
        .cube .cube-bottom{
            transform: rotateX(-90deg) translateZ(100px);
        }
        @keyframes cube{
            0%{
            transform: rotateY(0deg) rotateX(-45deg) rotateZ(-45deg);
            }
            100%{
            transform: rotateY(360deg) rotateX(-45deg) rotateZ(-45deg);
            }
        }
        .cube:hover{
            animation-play-state: paused
        }
    </style>
</head>
<body>
    <div class="wrap"><h1>i am header</h1></div> 
    
    <div class="wrap">
        <div class="cube">
            <div class="side cube-front">
                <h2>front</h2>
                <p>StarRing </p>
            </div>
            <div class="side cube-back">
                <h2>back</h2>
                <p>StarRing</p>
            </div>
            <div class="side cube-left">
                <h2>left</h2>
                <p>StarRing</p>
            </div>
            <div class="side cube-right">
                <h2>right</h2>
                <p>StarRing</p>
            </div>
            <div class="side cube-top">
                <h2>top</h2>
                <p>StarRing</p>
            </div>
            <div class="side cube-bottom">
                <h2>bottom</h2>
                <p>StarRing</p>
            </div>
        </div>
    </div>
    
    <div class="wrap"><h1>i am footer</h1></div>
</body>
</html>