效果图
只是做了简单的旋转魔方，使用HTML+CSS就够了！
思路解析
- 首先要有外层容器，动画加在外层容器上面，就能使内部所有的元素跟着一起动；
- 外层容器必须具有一定的宽度和高度，这样才能使其绕着自己的中心点旋转（默认旋转方式）；
- 关于内部div的变换，实际上一开始，所有的内部div都和外部容器在同一平面上。所以我们只需要掌握这一点就能够轻松找准 6个面的位置。
（在这里，我是这样写的）
【X横轴，指向屏幕右侧；Y纵轴，指向屏幕下方；Z竖轴，指向屏幕内部的轴】
第1面：相对于原来的位置沿着Z轴平移100px
第2面：第1面的对立面，相对于原来的位置沿着Z轴平移-100px
第3面：相对于原来的位置沿着Z轴平移100px，同时要沿着X轴旋转90°，从而和原来的平面垂直
第4面：第3面的对立面，和第3面平行，所以相对于原来的位置沿着Z轴平移-100px，同时要沿着X轴旋转-90°，从而和原来的平面垂直
第5面：相对于原来的位置沿着Z轴平移100px，同时要沿着Y轴旋转90°，从而和原来的平面垂直
第6面：第5面的对立面，和第5面平行，所以相对于原来的位置沿着Z轴平移-100px，同时要沿着Y轴旋转90°，从而和原来的平面垂直 - 最后让外部容器联通内部div沿着中心点旋转。
源码
- html代码
<body>
<div class="box">
<div class="dv1">1</div>
<div class="dv2">2</div>
<div class="dv3">3</div>
<div class="dv4">4</div>
<div class="dv5">5</div>
<div class="dv6">6</div>
</div>
</body>
- css代码
html,
body {
height: 100%;
width: 100%;
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 33%, #ffffff 60%, #f9f3d1 100%);
background-size: 100%;
background-repeat: no-repeat;
}
.box {
width: 200px;
height: 200px;
position: relative;
top: 300px;
left: 45%;
transform-style: preserve-3d;
animation: move 5s linear infinite;
}
.box:hover {
animation-play-state: paused;
}
.box>div {
position: absolute;
display: inline-block;
width: 200px;
height: 200px;
opacity: 0.8;
text-align: center;
font-size: 100px;
line-height: 200px;
color: #333;
cursor: pointer;
}
.box>.dv1 {
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
transform: translateZ(100px)
}
/* 1的对立面 */
.box>.dv2 {
background-color: #FFE53B;
background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
transform: translateZ(-100px)
}
.box>.dv3 {
background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
transform: rotateX(90deg) translateZ(100px)
}
/* 3的对立面 */
.box>.dv4 {
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
transform: rotateX(90deg) translateZ(-100px)
}
.box>.dv5 {
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
transform: rotateY(90deg) translateZ(100px)
}
/* 5的对立面 */
.box>.dv6 {
background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
transform: rotateY(90deg) translateZ(-100px)
}
/* Safari and Chrome */
@-webkit-keyframes move {
from {
transform: rotate3d(0, 0, 0, 0);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}
/* FireFox */
@-moz-keyframes move {
from {
transform: rotate3d(0, 0, 0, 0);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}
/* Opera */
@-o-keyframes move {
from {
transform: rotate3d(0, 0, 0, 0);
}
to {
transform: rotate3d(1, 1, 1, 360deg)
}
}
网站推荐
渐变色网站：https://www.grabient.com/
使用很简单，只需要赋值css代码，粘贴到样式文件就可以了！
