@Latest 3月20日
@Description CSS动画 | CSS旋转魔方
文章导航
1 效果图2 思路解析3 源码4 网站推荐1 效果图
只是做了简单的旋转魔方，使用HTML+CSS就够了！
2 思路解析
首先要有外层容器，动画加在外层容器上面，就能使内部所有的元素跟着一起动；
外层容器必须具有一定的宽度和高度，这样才能使其绕着自己的中心点旋转（默认旋转方式）；
关于内部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沿着中心点旋转。
3 源码
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)}}
4 网站推荐
渐变色网站：/
使用很简单，只需要调配喜欢的颜色，复制CSS代码粘贴到样式文件就可以了！
