建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
HTML
<div class="stage"> <div class="container"> <div class="side front">前面</div> <div class="side back">背面</div> <div class="side left">左面</div> <div class="side right">右面</div> <div class="side top">顶面</div> <div class="side bottom">底面</div> </div> </div>
-
CSS
@-webkit-keyframes spin { 0% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -webkit-transform:rotateY(360deg); transform:rotateY(360deg) } } @-moz-keyframes spin { 0% { -moz-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -moz-transform:rotateY(360deg); transform:rotateY(360deg) } } @-ms-keyframes spin { 0% { -ms-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -ms-transform:rotateY(360deg); transform:rotateY(360deg) } } @-o-keyframes spin { 0% { -o-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -o-transform:rotateY(360deg); transform:rotateY(360deg) } } @keyframes spin { 0% { transform:rotateY(0deg) } 100% { transform:rotateY(360deg) } } .stage { width: 300px; height: 300px; margin: 15px auto; position: relative; -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; perspective: 300px; } .container { top: 50%; left: 50%; margin: -100px 0 0 -100px; position: absolute; -webkit-transform: translateZ(-100px); -moz-transform: translateZ(-100px); -ms-transform: translateZ(-100px); -o-transform: translateZ(-100px); transform: translateZ(-100px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .container:hover { -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; -webkit-animation: spin 5s linear infinite; animation: spin 5s linear infinite; } .side { background: rgba(255,0,0,0.3); border: 1px solid red; font-size: 60px; font-weight: bold; color: #fff; height: 196px; line-height: 196px; position: absolute; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); text-transform: uppercase; width: 196px; } .front { -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); } .back { -webkit-transform: rotateX(180deg) translateZ(100px); -moz-transform: rotateX(180deg) translateZ(100px); -ms-transform: rotateX(180deg) translateZ(100px); -o-transform: rotateX(180deg) translateZ(100px); transform: rotateX(180deg) translateZ(100px); } .left { -webkit-transform: rotateY(-90deg) translateZ(100px); -moz-transform: rotateY(-90deg) translateZ(100px); -ms-transform: rotateY(-90deg) translateZ(100px); -o-transform: rotateY(-90deg) translateZ(100px); transform: rotateY(-90deg) translateZ(100px); } .right { -webkit-transform: rotateY(90deg) translateZ(100px); -moz-transform: rotateY(90deg) translateZ(100px); -ms-transform: rotateY(90deg) translateZ(100px); -o-transform: rotateY(90deg) translateZ(100px); transform: rotateY(90deg) translateZ(100px); } .top { -webkit-transform: rotateX(90deg) translateZ(100px); -moz-transform: rotateX(90deg) translateZ(100px); -ms-transform: rotateX(90deg) translateZ(100px); -o-transform: rotateX(90deg) translateZ(100px); transform: rotateX(90deg) translateZ(100px); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); -moz-transform: rotateX(-90deg) translateZ(100px); -ms-transform: rotateX(-90deg) translateZ(100px); -o-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); }