3D立方体(代码)

最新推荐文章于 2025-04-10 14:51:34 发布

王大强~

最新推荐文章于 2025-04-10 14:51:34 发布

阅读量2.2k

点赞数 1

分类专栏：代码块--效果源码文章标签： 3d

本文链接：https://blog.youkuaiyun.com/angularWQ/article/details/60957906

版权

代码块--效果源码专栏收录该内容

6 篇文章

订阅专栏

css

 .box{
            width: 250px;
            height: 250px;
            border: 1px dashed red;
            margin:100px auto;
            position: relative;
            border-radius: 50%;
            /* 让子盒子保持3d效果*/
            transform-style:preserve-3d;
            /*transform:rotateX(30deg) rotateY(-30deg);*/
            animation:gun 8s linear infinite;
        }
        .box>div{
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 250px;
            font-size:60px;
            color:#daa520;
        }
        .left{
            background-color: rgba(255,0,0,0.3);
            /* 变换中心*/
            transform-origin: left;
            /* 变换*/
            transform:rotateY(90deg) translateX(-125px);
        }
        .right{
            background:rgba(0,0,255,0.3);
            transform-origin: right;
            /* 变换*/
            transform:rotateY(90deg) translateX(125px);
        }
        .forward{
            background: rgba(255,255,0,0.3);
            transform:translateZ(125px);
        }
        .back{
            background: rgba(0,255,255,0.3);
            transform:translateZ(-125px);
        }
        .up{
            background: rgba(255,0,255,0.3);
            transform:rotateX(90deg) translateZ(125px);
        }
        .down{
            background: rgba(99,66,33,0.3);
            transform:rotateX(-90deg) translateZ(125px);
        }
        @keyframes gun {
            0%{
                transform:rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       
    </style>
</head>
<body>
    <div class="box">
        <div class="up">上</div>
        <div class="down">下</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="forward">前</div>
        <div class="back">后</div>
    </div>
</body>
</html>