CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。css3动画的属性主要分为三类：transform、transition以及animation。
下面就是用CSS3动画animation做的立方体旋转动画
例图：
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222; } .world { -webkit-perspective: 800px; perspective: 800px; width: 100vh; height: 100vh; position:absolute; left:40%; top:35%; } .cube { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 50vh; height: 50vh; position: relative; -webkit-animation: rotator 4.5s linear infinite; animation: rotator 4.5s linear infinite; outline: 0; } .cube * { background: #000; box-shadow: 0 0 3vh currentColor; -webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; } .cube:hover * { background: currentColor; box-shadow: 0 0 20vh currentColor; } .cube .cube__front { color:orange; -webkit-transform: translateZ(25vh); transform: translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__right { color:purple; -webkit-transform: rotateY(90deg) translateZ(25vh); transform: rotateY(90deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__left { color: pink; -webkit-transform: rotateY(270deg) translateZ(25vh); transform: rotateY(270deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__back { color: seagreen; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotateY(180deg) translateZ(25vh); transform: rotateY(180deg) translateZ(25vh); } .cube .cube__top { color: mediumseagreen; -webkit-transform: rotateX(90deg) translateZ(25vh); transform: rotateX(90deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cube .cube__bottom { color: dodgerblue; -webkit-transform: rotateX(270deg) translateZ(25vh); transform: rotateX(270deg) translateZ(25vh); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @-webkit-keyframes rotator { 0% { -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg); } } @keyframes rotator { 0% { -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <div class="world"> <div class="cube" tabindex="0"> <div class="cube__front"></div> <div class="cube__back"></div> <div class="cube__left"></div> <div class="cube__right"></div> <div class="cube__top"></div> <div class="cube__bottom"></div> </div> </div> </body> </html> -webkit-perspective 浏览器支持 目前浏览器都不支持 perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 -webkit-transform-style: preserve-3d; 属性规定如何在 3D 空间中呈现被嵌套的元素。 Firefox 支持 transform-style 属性。 Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。 CSS3 Animation最大的优点是解决了： transition动画只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 CSS 3Animation就是为了解决这些问题而提出转载于:https://www.cnblogs.com/yscode/p/7053847.html
相关资源：数据结构—成绩单生成器