大佬教程收集整理的这篇文章主要介绍了(六)HTML5立方体动画设置,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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立方体动画设置全部内容,希望文章能够帮你解决(六)HTML5立方体动画设置所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。