3D魔方
<style>
body{
background-color: black;
position: relative;
transform-style: preserve-3d;
perspective: 3000px;
}
.box_1{
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: absolute;
left: 300px;
top: 150px;
transform:rotateX(90deg) rotateY(90deg);
animation: move 5s 0s linear infinite;
}
.box{
width: 97px;
height: 97px;
border-radius: 50%;
border: 3px solid white;
position: absolute;
left: 0;
top: 0;
}
.one{
transform:translateZ(150px) ;
}
.two{
transform:translateZ(-150px);
}
.three{
transform:translateX(150px) rotateY(90deg);
}
.four{
transform:translateX(-150px) rotateY(90deg);
}
.five{
transform:translateY(-150px) rotateX(-90deg);
}
.six{
transform:translateY(150px) rotateX(-90deg);
}
.box_1:hover .one{
background-color:rgb(250, 4, 4) ;
box-shadow: 0px 0px 150px 0px rgb(250, 4, 4,0.4) ;
}
.box_1:hover .two{
background-color: rgba(255, 145, 0, 0.4);
box-shadow: 0px 0px 150px 0px rgba(255, 145, 0, 0.4);
}
.box_1:hover .three{
background-color: rgba(51, 255, 0, 0.4);
box-shadow: 0px 0px 150px 0px rgba(51, 255, 0, 0.4);
}
.box_1:hover .four{
background-color: rgba(35, 0, 189, 0.4);
box-shadow: 0px 0px 150px 0px rgba(35, 0, 189, 0.4);
}
.box_1:hover .five{
background-color: rgba(255, 0, 149, 0.4);
box-shadow: 0px 0px 150px 0px rgba(255, 0, 149, 0.4);
}
.box_1:hover .six{
background-color: rgba(0, 255, 115, 0.4);
box-shadow: 0px 0px 150px 0px rgba(0, 255, 115, 0.4);
}
@keyframes move{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
<body>
<div class="box_1">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
</div>
</body>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/981d53ad02799963ad3efce474f7d6c5.png)