css怎么画魔方 |css float 垂直居中

以上是大家要绘制的魔方结构，大家用CSS来绘制每一个面。

.magic-cube {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
}
.face {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid black;
box-sizing: border-box;
backface-visibility: hidden;
}
.front {
transform: translateZ(75px);
}
.back {
transform: translateZ(-75px) rotateY(180deg);
}
.top {
transform: rotateX(90deg) translateZ(75px) translateY(-75px);
}
.bottom {
transform: rotateX(-90deg) translateZ(75px) translateY(75px);
}
.left {
transform: rotateY(-90deg) translateZ(75px) translateX(-75px);
}
.right {
transform: rotateY(90deg) translateZ(75px) translateX(75px);
}
.square {
width: 48px;
height: 48px;
background-color: white;
box-sizing: border-box;
border: 1px solid darkgrey;
position: absolute;
}
.front .square:nth-child(1) {
transform: translateZ(38px);
top: 2px;
left: 2px;
}
.front .square:nth-child(2) {
transform: translateZ(38px);
top: 2px;
left: 52px;
}
.front .square:nth-child(3) {
transform: translateZ(38px);
top: 52px;
left: 2px;
}
.front .square:nth-child(4) {
transform: translateZ(38px);
top: 52px;
left: 52px;
}

以上是CSS代码的主要部分，大家使用transform属性来控制元素的位置和旋转。backface-visibility属性可以让元素背面不可见，避免了反面的影响。

通过上面的代码，大家可以成功地用CSS画出魔方，并且还可以通过改变transform属性的值来实现魔方的旋转和变化。