css+js实现3D盒子

最新推荐文章于 2023-10-06 10:55:50 发布

VIP文章笑问客从何处来

最新推荐文章于 2023-10-06 10:55:50 发布

阅读量548

点赞数 1

分类专栏： web前端文章标签： 3D 3D盒子 js css

本文链接：https://blog.csdn.net/Y_one/article/details/103324175

版权

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="fk.PNG">
    <title>css3D盒子</title>
    <style>
        html{
    
            perspective: 1000px; /*定义 3D 元素距视图的距离*/
            background-color: black;
        }
        .box{
    
            width: 200px;
            height: 200px;
            margin: 300px auto;
            position: relative;
            transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/
            animation: xuanzhuan 5s infinite linear;
        }
        @keyframes xuanzhuan {
    
            0%{
    
                transform: rotateX(0) rotateY(0) ;
            }
            100%{
    
                transform: rotateX(360deg) rotateY(360deg) ;
            }
        }
        .box>div{
    
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 200px;
        }
        .front{
    
            background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
        }
        .back{
    
            background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);
        }
        .left{
    
            background-image: linear-gradient(160deg, #0078ff 20%,#ca00ff 80%);
        }
        .right{
    
            background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
        }
        .top{
    
            background-image: linear-gradient(160deg, darkorchid 20%,#00b3ff 80%);
        }
        .bottom{
    
            background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);
        }
    </style>

</head>
<body>
<div class="box" id="box">
    <div class="front"></div>
    <div class="back"></div>
    <div class

最低0.47元/天解锁文章

笑问客从何处来

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css+js实现3D盒子

话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</title> &...
复制链接

扫一扫