标签：
-------------------------代码部分-------------------------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> body{ background: black; } ul{ list-style: none; width: 200px; height: 200px; margin: 100px auto; position: relative; -webkit-transform-style: preserve-3d;/*兼容谷歌浏览器和safari浏览器*/ } li{ width: 200px; height: 200px; position: absolute; text-align: center; line-height: 200px; font-size: 80px; font-weight: bold; color: white; } li:nth-child(1){/*第1个li:上面*/ background: rgba(128,128,128,0.98); -webkit-transform: rotateX(90deg) translateZ(100px); } li:nth-child(2){/*第2个li:下面*/ background: rgba(0,0,255,0.98); -webkit-transform: rotateX(360deg) translateZ(-100px); } li:nth-child(3){/*第3个li:右面*/ background: rgba(255,0,255,0.98); -webkit-transform: rotateY(-90deg) translateZ(100px); } li:nth-child(4){/*第4个li:左面*/ background: rgba(0,255,255,0.98); -webkit-transform: rotateY(90deg) translateZ(100px); } li:nth-child(5){/*第5个li:后面*/ background: rgba(255,0,0,0.98); -webkit-transform: rotateX(360deg) translateZ(100px); } li:nth-child(6){/*第6个li:正面*/ background: rgba(0,139,139,0.98); -webkit-transform: rotateX(270deg) translateZ(100px); } /**/ ul{ -webkit-animation: myanima 5s linear infinite; } @-webkit-keyframes myanima{ 0%{ -webkit-transform: rotateX(0deg) rotateY(0deg); } 100%{ -webkit-transform: rotateX(360deg) rotateY(360deg); } } #bottom{ position: absolute; width: 200px; height: 200px; bottom: 20px; margin: 0 auto; display: block; left: 48%; } #bottom input{ display: block; position: absolute; } #bottom input:nth-child(1){ left: 100px; } #bottom input:nth-child(2){ left: -100px; } #bottom input:nth-child(3){ top: -100px; } #bottom input:nth-child(4){ top: 100px; } </style> <style type="text/css" id="changes"> /*存放修改*/ </style> <script type="text/javascript"> function change(num1,num2,num3,num4){ var stylec=document.getElementById("changes"); //执行 stylec.innerHTML="@-webkit-keyframes myanima{0%{-webkit-transform: rotateX("+num1+"deg) rotateY("+num2+"deg);}100%{-webkit-transform: rotateX("+num3+"deg) rotateY("+num4+"deg);}}"; } </script> <body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div id="bottom"> <input type="button" value="→" onclick="change(0,0,0,360)"/> <input type="button" value="←" onclick="change(0,360,0,0)"/> <input type="button" value="↑" onclick="change(0,0,360,0)"/> <input type="button" value="↓" onclick="change(360,0,0,0)"/> <input type="button" value="重设" onclick="change(0,0,360,360)"/> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/loce/p/5123471.html
