<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>立方体动画</title><style type="text/css">body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{margin:0;padding:0;}html,body{height: 100%;}body{/*background: url(img/body_bg.png) repeat-x;*/background-size: 100% 100%;display: flex;justify-content: center;align-items: center;}.box{width: 200px;height: 200px;/*background: blue;*/transform-style: preserve-3d;/*transform:rotateY(30deg) rotateX(-15deg);*/animation:lft_ani 8s infinite linear;}.box a{display: block;opacity: .4;border: 1px solid black;transform-style:preserve-3d;}.box .small{width: 100px;height: 100px;background: #18fa07;position: absolute;left: 50px;top: 50px;}.box .big{width: 200px;height: 200px;background:#2501fd;position: absolute;left: 0;top: 0;transition: all 1s;} .box .big:nth-of-type(1){transform:translateZ(100px);}.box .big:nth-of-type(2){transform:translateZ(-100px);}.box .big:nth-of-type(3){transform:rotateY(-90deg) translateZ(100px);}.box .big:nth-of-type(4){transform:rotateY(90deg) translateZ(100px);}.box .big:nth-of-type(5){transform:rotateX(90deg) translateZ(100px);}.box .big:nth-of-type(6){transform:rotateX(-90deg) translateZ(100px);} .box:hover .big:nth-of-type(1){transform:translateZ(150px);}.box:hover .big:nth-of-type(2){transform:translateZ(-150px);}.box:hover .big:nth-of-type(3){transform:rotateY(-90deg) translateZ(150px);}.box:hover .big:nth-of-type(4){transform:rotateY(90deg) translateZ(150px);}.box:hover .big:nth-of-type(5){transform:rotateX(90deg) translateZ(150px);}.box:hover .big:nth-of-type(6){transform:rotateX(-90deg) translateZ(150px);} .box:hover{animation:lft_ani 8s infinite linear paused;} ?.box .small:nth-of-type(7){transform:translateZ(50px);}.box .small:nth-of-type(8){transform:translateZ(-50px);}.box .small:nth-of-type(9){transform:rotateY(-90deg) translateZ(50px);}.box .small:nth-of-type(10){transform:rotateY(90deg) translateZ(50px);}.box .small:nth-of-type(11){transform:rotateX(90deg) translateZ(50px);}.box .small:nth-of-type(12){transform:rotateX(-90deg) translateZ(50px);} ?@keyframes lft_ani{0%{transform:rotateX(0deg) rotateY(0deg);}100%{transform:rotateX(360deg) rotateY(360deg);}} ?</style></head><body><div class="box"><a href="#" class="big"></a><a href="#" class="big"></a><a href="#" class="big"></a><a href="#" class="big"></a><a href="#" class="big"></a><a href="#" class="big"></a><a href="#" class="small"></a><a href="#" class="small"></a><a href="#" class="small"></a><a href="#" class="small"></a><a href="#" class="small"></a><a href="#" class="small"></a></div></body></html>（六）HTML5立方体动画设置
原文地址：https://www.cnblogs.com/bgwhite/p/9406829.html