<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} ul,li{list-style: none;} .container{perspective: 1300;-webkit-perspective:1300;} .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;} .boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;} .on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);} .on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);} </style> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> var list=document.querySelector('.boxList'); window.onload=function(){ setInterval(transition,1000) } function transition(){ list.className='on boxList'; } </script></html>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
如何用CSS做圖片旋轉效果
HTML裡無法顯示背景顏色的解決方案
Js操作DOM對象的流程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
