彩色立方体

最新推荐文章于 2024-08-10 15:43:39 发布

java夜潇筱

最新推荐文章于 2024-08-10 15:43:39 发布

阅读量33

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/m0_61851977/article/details/131543596

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="炫彩立方体.css">
    <title>就是玩</title>
</head>

<body>
    <div class="world">
        <div class="cube" tabindex="0">
            <div class="cube_front"></div>
            <div class="cube_back"></div>
            <div class="cube_left"></div>
            <div class="cube_right"></div>
            <div class="cube_top"></div>
            <div class="cube_bottom"></div>
        </div>
    </div>
</body>

</html>

css

<style>
body{
    margin: 0;
    overflow:hidden;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.world{
    perspective: 800px;
    width: 100vh;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.cube{
    transform-style: preserve-3d;
    backface-visibility: hidden;
    width: 50vh;
    height: 50vh;
    position: relative;
    animation: rotator 4.5s linear infinite;
    outline: 0;
}
.cube * {
    background: #000;
    box-shadow: 00 3vh currentColor;
    transition: background 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
}
.cube:hover * {
    background: currentColor;
    box-shadow: 0 0 20vh currentColor;
}
.cube .cube_front{
    color: deeppink;
    transform: translateZ(25vh);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cube .cube_right{
    color: lightcoral;
    transform: rotateY(90deg) translateZ(25vh);
    position: absolute;
    top:0;
    right: 0;
    width: 100%;
    height: 100%;
}
.cube .cube_left{
    color: skyblue;
    transform: rotateY(270deg) translateZ(25vh);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cube .cube_back{
    color: seagreen;
    transform:rotateY(180deg) translateZ(25vh);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cube .cube_top{
    color: mediumseagreen;
    transform:rotateX(90deg) translateZ(25vh);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cube .cube_bottom{
    color: dodgerblue;
    transform:rotateX(270deg) translateZ(25vh);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
@keyframes rotator{
    0%{
        transform: rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

</style>

彩色立方体