html怎么做一个正方形,使用HTML+CSS做一个正方体

创建HTML结构

我们创建一个父容器，里面保存正方体六个面

创建CSS样式

.mBox {

width: 200px;

height: 200px;

margin: 50px auto;

top: 100px;

transform-style: preserve-3d; /*开启3D*/

position: relative;

transform: rotateY(-45deg) rotateX(-45deg);

animation: move 100s linear infinite;/*添加的观测动画效果*/

}

div {

width: 200px;

height: 200px;

position: absolute;

opacity: .8;

}

设置每个面的样式

.top{

background-color: rgb(18, 196, 136);

transform: translateZ(100px);

}

.bottom{

background-color: rgb(70, 147, 209);

transform: translateZ(-100px);

}

.left{

background-color: rgb(189, 79, 112);

transform: translateX(-100px) rotateY(90deg);

}

.right{

background-color: rgb(59, 212, 59);

transform: translateX(100px) rotateY(90deg);

}

.before{

background-color: rgb(158, 136, 64);

transform: translateY(100px) rotateX(90deg);

}

.after{

background-color: rgb(9, 82, 57);

transform: translateY(-100px) rotateX(90deg);

}

我们为正方体添加一个动画效果，观测一下

@keyframes move {

0%{

transform: rotateY(-45deg) rotateX(45deg);

}

100%{

transform: rotateY(10000deg) rotateX(5000deg);

}

}

最后效果如下

旋转正方体