思路：（要实现魔方六个面以及九个小块的样式并旋转展示。）
内容部分：魔方分为六个面，每个面有九个小块，使用一个div内嵌套六个div再嵌套九个div实现内容部分。 样式部分：最外层div设置属性 transform-style: preserve-3d;实现整体的3D效果。
内部六个面使用 transform: rotateX/Y/Z(0deg) translateZ(1px); 分别平移旋转不同的角度，与第一个面组成立方体。
设置每个面九个小块的大小和边框样式（圆角）以及背景颜色。
最后设置整体的旋转方式以及循环时间等。
实现
html 部分
1 2 3 4 5 6 7Document 8 9 10 11 12 13 14 1516 1795 96 9718 19 20 21 22 23 24 25 26 27 2829 3031 32 33 34 35 36 37 38 39 40 4142 4344 45 46 47 48 49 50 51 52 53 5455 5657 58 59 60 61 62 63 64 65 66 6768 6970 71 72 73 74 75 76 77 78 79 8081 8283 84 85 86 87 88 89 90 91 92 9394
css 部分
1 body { 2 position: relative; 3 width: 500px; 4 height: 500px; 5 padding: 0; 6 margin: 0 auto; 7 } 8 9 10 /*整体视角与样式*/ 11 12 .perspective { 13 position: relative; 14 width: 300px; 15 height: 300px; 16 -webkit-transform: perspective(1500px); 17 -moz-transform: perspective(1500px); 18 } 19 20 21 /*整体3d效果*/ 22 23 .m3d { 24 -moz-transform-style: preserve-3d; 25 -webkit-transform-style: preserve-3d; 26 -webkit-animation-name: animation; 27 -o-animation-name: animation; 28 animation-name: animation; 29 -webkit-animation-timing-function: ease-in-out; 30 -o-animation-timing-function: ease-in-out; 31 animation-timing-function: ease-in-out; 32 -webkit-animation-iteration-count: infinite; 33 -o-animation-iteration-count: infinite; 34 animation-iteration-count: infinite; 35 -webkit-animation-duration: 9s; 36 -o-animation-duration: 9s; 37 animation-duration: 9s; 38 margin: 100px; 39 -webkit-transform-origin: 150px 150px 0; 40 -moz-transform-origin: 150px 150px 0; 41 -ms-transform-origin: 150px 150px 0; 42 -o-transform-origin: 150px 150px 0; 43 transform-origin: 150px 150px 0; 44 } 45 46 47 /*六个面的样式*/ 48 49 .perspective div { 50 display: block; 51 position: absolute; 52 width: 298px; 53 height: 298px; 54 border: 1px solid rgba(255, 200, 0, 0.2); 55 border-radius: 3%; 56 } 57 58 59 /*正面样式*/ 60 61 .front { 62 -webkit-transform: rotateY(0deg) translateZ(150px); 63 -moz-transform: rotateY(0deg) translateZ(150px); 64 } 65 66 67 /*正面小块颜色*/ 68 69 .front div { 70 background: rgba(57, 170, 174, 0.8); 71 } 72 73 74 /*背面样式*/ 75 76 .back { 77 -webkit-transform: rotateY(180deg) translateZ(150px); 78 -moz-transform: rotateY(180deg) translateZ(150px); 79 } 80 81 82 /*背面小块颜色*/ 83 84 .back div { 85 background: rgba(99, 234, 106, 0.8); 86 } 87 88 89 /*右面样式*/ 90 91 .right { 92 -webkit-transform: rotateY(90deg) translateZ(150px); 93 -moz-transform: rotateY(90deg) translateZ(150px); 94 } 95 96 97 /*右面小块颜色*/ 98 99 .right {100 background: rgba(57, 209, 209, 0.8);101 }102 103 104 /*左面样式*/105 106 .left {107 -webkit-transform: rotateY(-90deg) translateZ(150px);108 -moz-transform: rotateY(-90deg) translateZ(150px);109 }110 111 112 /*左面小块颜色*/113 114 .left div {115 background: rgba(252, 29, 20, 0.8);116 }117 118 119 /*上面样式*/120 121 .top {122 -webkit-transform: rotateX(90deg) translateZ(150px);123 -moz-transform: rotateX(90deg) translateZ(150px);124 }125 126 127 /*上面小块颜色*/128 129 .top div {130 background: rgba(20, 252, 55, 0.8);131 }132 133 134 /*下面样式*/135 136 .bottom {137 -webkit-transform: rotateX(-90deg) translateZ(150px);138 -moz-transform: rotateX(-90deg) translateZ(150px);139 }140 141 142 /*下面小块颜色*/143 144 .bottom div {145 background: rgba(20, 39, 252, 0.8);146 }147 148 149 /*小块的样式*/150 151 .big div {152 width: 97px;153 height: 98px;154 display: block;155 float: left;156 position: relative;157 border: 1px solid rgba(255, 255, 255, 0.9);158 ;159 border-radius: 10%;160 }161 162 /*整体旋转方式*/163 /*164 @-webkit-keyframes animation {165 from {166 -webkit-transform: rotatey(0) rotateX(0);167 }168 to {169 -webkit-transform: rotatey(360deg) rotateX(360deg);170 }171 }172 173 @keyframes animation {174 from {175 transform: rotatey(0) rotateX(0);176 }177 to {178 transform: rotatey(360deg) rotateX(360deg);179 }180 }181 */182 183 /*整体旋转方式*/184 185 @-webkit-keyframes animation {186 from,187 to { }188 16% {189 -webkit-transform: rotatey(-90deg);190 }191 33% {192 -webkit-transform: rotatey(-90deg) rotateZ(135deg);193 }194 50% {195 -webkit-transform: rotatey(225deg) rotateZ(135deg);196 }197 66% {198 -webkit-transform: rotatey(135deg) rotateX(135deg);199 }200 85% {201 -webkit-transform: rotatex(135deg);202 }203 }204 205 206 /*整体旋转方式*/207 208 @keyframes animation {209 from,210 to { }211 16% {212 transform: rotatey(-90deg);213 }214 33% {215 transform: rotatey(-90deg) rotateZ(135deg);216 }217 50% {218 transform: rotatey(225deg) rotateZ(135deg);219 }220 66% {221 transform: rotatey(135deg) rotateX(135deg);222 }223 85% {224 transform: rotatey(135deg);225 }226 }
