- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title></title>
- <meta name=""content="">
- <style>
- .box{width:500px;height:300px;background-color:blue;animation:rotate_0 3s infinite}
- @keyframes rotate_0 {
- 0% {
- transform: rotateY(240deg) translateZ(150px) scale(0.85);
- z-index: 1;
- }
- 12.4% {
- z-index: 1;
- }
- 12.5% {
- transform: rotateY(285deg) translateZ(150px) scale(0.9);
- z-index: 2;
- }
- 37.5% {
- transform: rotateY(375deg) translateZ(150px) scale(1);
- z-index: 2;
- }
- 62.5% {
- transform: rotateY(465deg) translateZ(150px) scale(0.9);
- z-index: 2;
- }
- 62.6% {
- z-index: 1;
- }
- 87.5% {
- transform: rotateY(555deg) translateZ(150px) scale(0.8);
- }
- 100% {
- transform: rotateY(600deg) translateZ(150px) scale(0.85);
- }
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>[/code]
来源: http://www.qdfuns.com/note/11607/1e5e30ff4313c30640026d09ed08614f.html