3D魔方的思路与实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3D魔方的思路与实现相关的知识，希望对你有一定的参考价值。
思路：（要实现魔方六个面以及九个小块的样式并旋转展示。）
内容部分：魔方分为六个面，每个面有九个小块，使用一个div内嵌套六个div再嵌套九个div实现内容部分。 样式部分：最外层div设置属性 transform-style: preserve-3d;实现整体的3D效果。
内部六个面使用 transform: rotateX/Y/Z(0deg) translateZ(1px); 分别平移旋转不同的角度，与第一个面组成立方体。
设置每个面九个小块的大小和边框样式（圆角）以及背景颜色。
最后设置整体的旋转方式以及循环时间等。
实现
html 部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!-- 一个关于3D魔方的页面 --> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 <meta name="author" content="Wangshiyuan" /> 9 <link rel="shortcut icon" href="img/geekicon.ico" type="image/x-icon" /> 10 <link rel="stylesheet" type="text/css" href="css/box.css"> 11 </head> 12 13 <body> 14 <!-- 整体布局 --> 15 <div class="perspective m3d"> 16 <!-- 六个面 --> 17 <div class="front big"> 18 <!-- 九块 --> 19 <div class="one small"></div> 20 <div class="two small"></div> 21 <div class="three small"></div> 22 <div class="four small"></div> 23 <div class="five small"></div> 24 <div class="six small"></div> 25 <div class="seven small"></div> 26 <div class="eight small"></div> 27 <div class="nine small"></div> 28 </div> 29 <!-- 六个面 --> 30 <div class="back big"> 31 <!-- 九块 --> 32 <div class="one small"></div> 33 <div class="two small"></div> 34 <div class="three small"></div> 35 <div class="four small"></div> 36 <div class="five small"></div> 37 <div class="six small"></div> 38 <div class="seven small"></div> 39 <div class="eight small"></div> 40 <div class="nine small"></div> 41 </div> 42 <!-- 六个面 --> 43 <div class="right big"> 44 <!-- 九块 --> 45 <div class="one small"></div> 46 <div class="two small"></div> 47 <div class="three small"></div> 48 <div class="four small"></div> 49 <div class="five small"></div> 50 <div class="six small"></div> 51 <div class="seven small"></div> 52 <div class="eight small"></div> 53 <div class="nine small"></div> 54 </div> 55 <!-- 六个面 --> 56 <div class="left big"> 57 <!-- 九块 --> 58 <div class="one small"></div> 59 <div class="two small"></div> 60 <div class="three small"></div> 61 <div class="four small"></div> 62 <div class="five small"></div> 63 <div class="six small"></div> 64 <div class="seven small"></div> 65 <div class="eight small"></div> 66 <div class="nine small"></div> 67 </div> 68 <!-- 六个面 --> 69 <div class="top big"> 70 <!-- 九块 --> 71 <div class="one small"></div> 72 <div class="two small"></div> 73 <div class="three small"></div> 74 <div class="four small"></div> 75 <div class="five small"></div> 76 <div class="six small"></div> 77 <div class="seven small"></div> 78 <div class="eight small"></div> 79 <div class="nine small"></div> 80 </div> 81 <!-- 六个面 --> 82 <div class="bottom big"> 83 <!-- 九块 --> 84 <div class="one small"></div> 85 <div class="two small"></div> 86 <div class="three small"></div> 87 <div class="four small"></div> 88 <div class="five small"></div> 89 <div class="six small"></div> 90 <div class="seven small"></div> 91 <div class="eight small"></div> 92 <div class="nine small"></div> 93 </div> 94 </div> 95 </body> 96 97 </html>
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 }
以上是关于3D魔方的思路与实现的主要内容，如果未能解决你的问题，请参考以下文章