立方体旋转动画效果
css
1 #container{ 2 width: 400px; 3 height: 400px; 4 -webkit-perspective:800; 5 perspective:800; 6 -webkit-perspective-origin:50% 225px; 7 perspective-origin:50% 225px; 8 9 } 10 #stage{ 11 width: 300px; 12 height:300px; 13 14 -webkit-transition: -webkit-transform 2s; 15 transition: transform 2s; 16 -webkit-transform-style: preserve-3d; 17 transform-style: preserve-3d; 18 19 } 20 #shape{ 21 width: 200px; 22 height:200px; 23 position: relative; 24 top: 100px; 25 margin:0 auto; 26 transform-style: preserve-3d; 27 } 28 #shape{ 29 -webkit-animation: spin 8s infinite linear; 30 31 } 32 .plane{ 33 position: absolute; 34 width: 200px; 35 height:200px; 36 background: #c23c00; 37 border: 1px solid #000; 38 font-size: 100px; 39 color:#fff; 40 text-align: center; 41 line-height: 200px; 42 -webkit-transition: -webkit-transform 2s, opacity 2s; 43 transition: transform 2s, opacity 2s; 44 -webkit-backface-visibility: hidden; 45 backface-visibility: hidden; 46 } 47 #shape.backface .plane{ 48 -webkit-backface-visibility: visible; 49 backface-visibility: visible; 50 } 51 52 .cube>.one{ 53 opacity: 0.5 ; 54 -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px); 55 transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px) 56 } 57 .cube>.two{ 58 opacity: 0.5 ; 59 -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px); 60 transform: scale3d(1.2, 1.2, 1.2) translateZ(100px); 61 } 62 .cube>.three{ 63 opacity: 0.5 ; 64 -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px); 65 transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px); 66 } 67 .cube > .four{ 68 opacity: 0.5 ; 69 -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px); 70 transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px); 71 } 72 .cube > .five{ 73 opacity: 0.5 ; 74 -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px); 75 transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px); 76 } 77 .cube > .six{ 78 opacity: 0.5 ; 79 -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px); 80 transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px); 81 } 82 @-webkit-keyframes spin{ 83 0% { 84 -webkit-transform : rotateY(0); 85 transform : rotateY(0); 86 } 87 100% { 88 -webkit-transform : rotateY(-360deg); 89 transform : rotateY(-360deg); 90 } 91 } 92 @keyframes spin{ 93 0% { 94 -webkit-transform : rotateY(0); 95 transform : rotateY(0); 96 } 97 100% { 98 -webkit-transform : rotateY(-360deg); 99 transform : rotateY(-360deg); 100 } 101 }
perspective:视距
transform-style: preserve-3d; 3d动画必须，且放在父元素上
translateZ(100px) （100px是高度的一半）
动画加在shape上（.cube的父级，则整体都会旋转）
html
<div id="container" > <div id="stage"> <div id="shape" class="cube backface"> <div class="plane one">1</div> <div class="plane two">2</div> <div class="plane three">3</div> <div class="plane four">4</div> <div class="plane five">5</div> <div class="plane six">6</div> </div> </div> </div>