首页 > 代码库 > 3D魔方的思路与实现
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魔方的思路与实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。