前端 html5和css3实现3d正方体旋转

1.创建一个div盒子：

2.设置样式style，实现旋转功能：

1.设置六个面的宽，高，颜色等：

.side {

position: absolute;

width: 200px;

height: 200px;

background-color: rgba(190, 54, 23, 0.8);

border: 1px solid #3a13d5;

}

  2. 创建3D视角 ： 

.container {

margin-top: 200px;

margin-left: 200px;

perspective: 1000px;

3.使用动画让正方体旋转 :

.cube {

width: 200px;

height: 200px;

position: relative;

transform-style: preserve-3d;

animation: spin 5s infinite linear;

}

4.设置六个面的坐标：

.front {

transform: translateZ(100px);

}

.back {

transform: rotateY(180deg) translateZ(100px);

}

.top {

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

}

.bottom {

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

}

.left {

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

}

.right {

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

}

5.用动画keyframes让其旋转起来：

@keyframes spin {

0% {

transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

}

100% {

transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);

}

}

精彩文章

 您阅读本篇文章共花了：