css旋转水晶魔方 |css3让图片居中显示

/* 设定立方体尺寸 */
.cube{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
/* 设定立方体面 */
.face{
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 50px;
color: white;
}
/* 各个面的颜色 */
.front{
background-color: #2196F3;
transform: translateZ(100px);
}
.back{
background-color: #F44336;
transform: rotateY(180deg) translateZ(100px);
}
.left{
background-color: #8BC34A;
transform: rotateY(-90deg) translateZ(100px);
}
.right{
background-color: #FFC107;
transform: rotateY(90deg) translateZ(100px);
}
.top{
background-color: #9C27B0;
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
background-color: #E91E63;
transform: rotateX(-90deg) translateZ(100px);
}
/* 点击魔方进行旋转 */
.rotate-x {
transform: rotateX(90deg);
}
.rotate-y {
transform: rotateY(90deg);
}

在 web 页面中，制作一个立方体并让它能够在各个方向上旋转是非常好玩的事情。让大家来看看如何使用 CSS 制作一个旋转水晶魔方。

首先，大家需要先设定立方体的尺寸并开启 preserve-3d 属性。preserve-3d 属性可以保证每个面的旋转不会对其他面造成影响。

接下来，大家需要设定立方体的各个面。为了使每个面上的文字居中显示，大家使用 text-align 和 line-height 属性并赋予不同的颜色。

现在，大家将不同的面分别赋予颜色，并用 translateZ 属性将它们平移到正确的位置。 然后，大家使用 rotateY 和 rotateX 属性来分别对立方体进行水平和垂直方向的旋转。最后，大家使用 transition 属性来使旋转更加平滑。

最后，大家需要添加一个点击事件，让魔方能够在不同方向上进行旋转。大家可以添加一个 class，然后使用 JavaScript 来动态地改变这个 class 然后触发旋转效果。在这里，大家使用了 rotate-x 和 rotate-y 两个 class 来旋转。

现在，你已经学会了如何制作一个旋转水晶魔方。试着在你的网站上添加这个效果，并让你的用户感到惊喜吧。