1、旋转的正方体
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>旋转的正方体</title> <style type="text/css"> @-webkit-keyframes rotationX { from { -webkit-transform: rotateX(0); } to { -webkit-transform: rotateX(360deg); } } @-webkit-keyframes rotationY { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); } } @-moz-keyframes rotationX { from { -moz-transform: rotateX(0); } to { -moz-transform: rotateX(360deg); } } @-moz-keyframes rotationY { from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(360deg); } } @-o-keyframes rotationX { from { -o-transform: rotateX(0); } to { -o-transform: rotateX(360deg); } } @-o-keyframes rotationY { from { -o-transform: rotateY(0); } to { -o-transform: rotateY(360deg); } } @keyframes rotationX { from { transform: rotateX(0); } to { transform: rotateX(360deg); } } @keyframes rotationY { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } body { background: black; } #space3d { -webkit-perspective: 800; -moz-perspective: 800; -o-perspective: 800; perspective: 800; -webkit-perspective-origin: 50% 10%; -moz-perspective-origin: 50% 10%; -o-perspective-origin: 50% 10%; perspective-origin: 50% 10%; } #pagegroup { position: relative; top: 160px; margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-name: rotationY; -webkit-animation-duration: 8s; -webkit-animation-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: rotationY; -moz-animation-duration: 8s; -moz-animation-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -o-animation-name: rotationY; -o-animation-duration: 8s; -o-animation-function: linear; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; animation-name: rotationY; animation-duration: 8s; animation-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } #pagegroup .page { position: absolute; left: 0; top: 0; background: rgba(255, 255, 255, 0.6); border: 1px solid white; border-radius: 12px; height: 200px; width: 200px; color: black; font-size: 124pt; text-align: center; } #pagegroup .page1 { -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); } #pagegroup .page2 { -webkit-transform: rotateY(90deg) translateZ(100px); -moz-transform: rotateY(90deg) translateZ(100px); -o-transform: rotateY(90deg) translateZ(100px); transform: rotateY(90deg) translateZ(100px); } #pagegroup .page3 { -webkit-transform: rotateY(180deg) translateZ(100px); -moz-transform: rotateY(180deg) translateZ(100px); -o-transform: rotateY(180deg) translateZ(100px); transform: rotateY(180deg) translateZ(100px); } #pagegroup .page4 { -webkit-transform: rotateY(-90deg) translateZ(100px); -moz-transform: rotateY(-90deg) translateZ(100px); -o-transform: rotateY(-90deg) translateZ(100px); transform: rotateY(-90deg) translateZ(100px); } #pagegroup .page5 { -webkit-transform: rotateX(90deg) translateZ(100px); -moz-transform: rotateX(90deg) translateZ(100px); -o-transform: rotateX(90deg) translateZ(100px); transform: rotateX(90deg) translateZ(100px); } #pagegroup .page6 { -webkit-transform: rotateX(-90deg) translateZ(100px); -moz-transform: rotateX(-90deg) translateZ(100px); -o-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <!-- div#space3d>div#pagegroup>div.page.page${$}*6 --> <div id="space3d"> <div id="pagegroup"> <div class="page page1">1</div> <div class="page page2">2</div> <div class="page page3">3</div> <div class="page page4">4</div> <div class="page page5">5</div> <div class="page page6">6</div> </div> </div> <button id="changeX">沿X轴旋转</button> <button id="changeY">沿Y轴旋转</button> <script type="text/javascript"> ;(function() { var win = this, doc = win.document, cube = doc.getElementById('pagegroup'), changeX = doc.getElementById('changeX'), changeY = doc.getElementById('changeY'); win.addEventListener('load', ready, false); function ready() { changeX.addEventListener('click', rotationX, false); changeY.addEventListener('click', rotationY, false); } function rotationX() { cube.style.webkitAnimationName = 'rotationX'; cube.style.mozAnimationName = 'rotationX'; cube.style.oAnimationName = 'rotationX'; cube.style.animationName = 'rotationX'; } function rotationY() { cube.style.webkitAnimationName = 'rotationY'; cube.style.mozAnimationName = 'rotationY'; cube.style.oAnimationName = 'rotationY'; cube.style.animationName = 'rotationY'; } }).call(this); </script> </body> </html>
2、旋转木马
<!DOCTYPE html> <html> <head> <title>旋转木马</title> <meta charset="utf-8" /> <style> @-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); } } body { background: black; } #stage { -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; } #container { position: relative; margin: 200px auto 0 auto; width: 100px; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; -webkit-animation: spin 12s linear infinite; } #container img { position: absolute; border: 1px solid red; } #container img:nth-child(1) { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(0deg) translateZ(87px); } #container img:nth-child(2) { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(60deg) translateZ(87px); } #container img:nth-child(3) { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(120deg) translateZ(87px); } #container img:nth-child(4) { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(180deg) translateZ(87px); } #container img:nth-child(5) { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(240deg) translateZ(87px); } #container img:nth-child(6) { -webkit-transform: scale3d(1.5,1.5,1.5) rotateY(300deg) translateZ(87px); } </style> </head> <body> <div id="stage"> <div id="container"> <img src="http://58lou.com/data/albums/album_38/100x100/e721542702399a9dd6cae27b.jpg"> <img src="http://58lou.com/data/albums/album_38/100x100/wKgKN0_NYPn6MD7uABcPAyDfdDc037.jpg"> <img src="http://58lou.com/data/albums/album_38/100x100/http_imgload.cgi.jpg"> <img src="http://58lou.com/data/albums/album_38/100x100/463427_145609312231781_1758510383_o.jpg"> <img src="http://58lou.com/data/albums/album_38/100x100/wKgKN1Bjtk2UJjTnAACAs9rWOqI551.jpg"> <img src="http://58lou.com/data/albums/album_38/100x100/%7B880140A8-D42A-479C-B96B-831C8FA15DC3%7D.jpg"> </div> </div> </body> </html>