html5css写旋转立方体,css练习-旋转的立方体

1. 建立HTML结构

立方体有六个面，分别使用六个div

外面使用wrap容器包裹，作为整体，用来执行旋转动画

2. 整体样式

body {

perspective: 1000px;

}

.wrap {

position: relative;

width: 200px;

height: 200px;

margin: 200px auto 0;

/* transform: rotateX(45deg) rotateY(45deg); */

transform-style: preserve-3d;

}

.wrap div {

position: absolute;

width: 200px;

height: 200px;

border: 1px solid #000000;

background-color: orange;

}

因为要旋转的是整体，所以给wrap的父级body添加视距

后面要设置的背景图片的大小是200*200的，所以给容器大小设置相同的大小

给wrap设置transform-style，开启三维立体空间，如果没设置，看起来就会像一个平面

为了方便观察，给wrap先设置一个小角度的旋转

3. 立方体各个面的样式

.box1 {

background: url(img/布丁.png) no-repeat;

transform: translateZ(100px);

}

.box2 {

background: url(img/棒冰.png) no-repeat;

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

}

.box3 {

background: url(img/爆米花.png) no-repeat;

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

}

.box4 {

background: url(img/碧根果.png) no-repeat;

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

}

.box5 {

background: url(img/蛋糕.png) no-repeat;

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

}

.box6 {

background: url(img/饼干.png) no-repeat;

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

}

六个面进行不同角度，不同程度的旋转。

然后向朝向的方向平移100px的距离

4. 动画

@keyframes myRotate{

from{

transform: rotateX(0) rotateY(0);

}

to{

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

}

}

设置动画的开始状态和结束状态

然后在wrap中添加动画

animation: myRotate 2s infinite linear;

5. 完成

image.png