css彩色正方体 |css鼠标经过图片变暗

/* CSS代码 */
.cube-container {
position: relative;
perspective: 1000px;
}
.cube {
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: translateZ(-100px);
animation: spin 5s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}
.front {
transform: translateZ(100px);
background: #f5a5a5;
}
.back {
transform: translateZ(-200px) rotateY(180deg);
background: #ffd03f;
}
.left {
transform: translateX(-100px) rotateY(-90deg);
background: #55b2d2;
}
.right {
transform: translateX(100px) rotateY(90deg);
background: #f7e681;
}
.top {
transform: translateY(-100px) rotateX(90deg);
background: #6ea4bf;
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
background: #ffd54f;
}
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}

大家通过这段CSS代码实现了一个彩色立体正方体。可以看到，这个CSS代码中定义了一个名为”cube-container”的容器，以及一个名为”cube”的正方体。另外，还定义了6个名为”front”, “back”, “left”, “right”, “top”和”bottom”的面，每个面都拥有不同的背景颜色和旋转角度。

大家将正方体放在容器中，并设置容器的”perspective”属性，这样可以让正方体具有3D效果。同时，大家对”cube”和”face”元素应用了一些CSS3的变形属性，如”transform”, “transform-style”和”animation”，以实现3D效果和自动旋转动画。

总的来说，CSS彩色正方体是一种非常炫酷且易于实现的3D图形技术，可以用于Web开发中的多种场景。