- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3 旋转 </title>
- <style>
- body{
- background:#eeeeee;
- }
- #view{
- width: 210px;
- height: 210px;
- margin: 200px auto;
- perspective: 500px;
- -webkit-perspective: 500px;
- perspective-origin: 250px 100px;
- -webkit-perspective-origin: 250px 100px;
- -moz-perspective-origin: 250px 100px;
- }
- @keyframes scroll{
- 100%{
- transform: rotate3d(1,1,1,360deg);
- }
- }
- #cube{
- position: relative;
- animation: scroll 2s linear 7s infinite;
- transform-style: preserve-3d;
- }
- .item{
- width: 200px;
- height: 200px;
- line-height: 200px;
- border: 5px solid #666;
- font-size: 32px;
- text-align: center;
- color: #fff;
- opacity: 0.7;
- background: #009933;
- position: absolute;
- }
- @keyframes item1 {
- 100%{
- transform: rotateY(-90deg);
- }
- }
- @keyframes item2 {
- 100%{
- transform: rotateY(90deg);
- }
- }
- @keyframes item3 {
- 100%{
- transform: rotateX(90deg);
- }
- }
- @keyframes item4 {
- 100%{
- transform: rotateX(-90deg);
- }
- }
- @keyframes item5 {
- 100%{transform: translateZ(210px);}
- }
- @keyframes item6 {
- 100%{
- transform: rotateY(180deg);
- }
- }
- #item1{
- z-index: 6;
- background: #009933;
- transform-origin: left;
- animation: item1 1s linear 1s both;
- }
- #item2{
- z-index: 5;
- background: #996600;
- transform-origin: right;
- animation: item2 1s linear 2s both;
- }
- #item3{
- z-index: 4;
- background: #FFCC00;
- transform-origin: top;
- animation: item3 1s linear 3s both;
- }
- #item4{
- z-index: 3;
- background: #CC0033;
- transform-origin: bottom;
- animation: item4 1s linear 4s both;
- }
- #item5{
- z-index: 2;
- background: #336666;
- transform-origin: bottom;
- animation: item5 1s linear 5s both;
- }
- #item6{
- z-index: 1;
- background: #330066;
- transform-origin: bottom;
- animation: item6 1s linear 6s both;
- }
- </style>
- </head>
- <body>
- <div id="view">
- <div id="cube">
- <div class="item" id="item1">One</div>
- <div class="item" id="item2">Two</div>
- <div class="item" id="item3">Three</div>
- <div class="item" id="item4">Four</div>
- <div class="item" id="item5">Five</div>
- <div class="item" id="item6">Six</div>
- </div>
- </div>
- <div style="text-align: center;clear: both;"></div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/24824/829724daa3fffe3cfcfc4e02344f4353.html