本文将借助css3实现魔方动画效果，设计思路如下：
- HTML方面采用六个div容器形成六个立方面；
- CSS方面采用transform-style: preserve-3d;形成三维场景；transform: rotateX(-90deg) translateZ(150px);实现立方面旋转组成立方体；animation: rotate 10s linear infinite alternate;动画效果添加；
效果图：
HTML内容：
1 <div class="box"> 2 <div class="before"> 3 <ul> 4 <li>1</li> 5 <li>2</li> 6 <li>3</li> 7 <li>4</li> 8 <li>5</li> 9 <li>6</li> 10 <li>7</li> 11 <li>8</li> 12 <li>9</li> 13 </ul> 14 </div> 15 <div class="back"></div> 16 </div>
设置before、back等六面分别作为立面的前后左右上下各面；
CSS核心：
1 @keyframes rotate { 2 0% { 3 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 4 } 5 6 20% { 7 transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg); 8 } 9 10 40% { 11 transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg); 12 } 13 14 60% { 15 transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg); 16 } 17 18 80% { 19 transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg); 20 } 21 22 100% { 23 transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg); 24 } 25 } 26 27 .top { 28 background-color: transparent; 29 transform: rotateX(90deg) translateZ(150px); 30 } 31 32 .box { 33 width: 300px; 34 height: 300px; 35 margin: 150px auto; 36 position: relative; 37 font-size: 50px; 38 /*perspective: 1000px;*/ 39 transform-style: preserve-3d; 40 41 animation: rotate 10s linear infinite alternate; 42 }
- 动画rotate设置不同时间段的立方体旋转角度；
- box容器指定了三维场景以及动画效果；
- top 则将平面旋转（rotateX）、设置距离屏幕距离（translateZ）；
如何理解3D场景下perspective与translateZ的关系？
translateZ() CSS函数沿着z轴在三维空间中重新定位元素，即，从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的，它指定元素向内或向外移动的距离。
perspective CSS属性决定在z = 0平面和用户之间的距离以便使所述3D定位的元素一些透视效果。z> 0的每个3D元素变大;，每个z <0的三维元素则变小。效果的强度由此属性的值决定。
说明：
- d代表perspective设置的用户目视距屏幕的距离；
- z代表translateZ设置的元素移动距离；
扫描二维码关注公众号，回复：
8114272 查看本文章
源码来了：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 ul { 9 list-style: none; 10 margin:0; 11 padding:0; 12 } 13 .box { 14 width: 300px; 15 height: 300px; 16 margin: 150px auto; 17 position: relative; 18 font-size: 50px; 19 /*perspective: 1000px;*/ 20 transform-style: preserve-3d; 21 22 animation: rotate 10s linear infinite alternate; 23 } 24 25 .box>div { 26 width: 300px; 27 height: 300px; 28 position: absolute; 29 } 30 .right { 31 background-color: transparent; 32 transform: rotateY(90deg) translateZ(150px); 33 } 34 .left { 35 background-color: transparent; 36 transform: rotateY(-90deg) translateZ(150px); 37 } 38 39 .top { 40 background-color: transparent; 41 transform: rotateX(90deg) translateZ(150px); 42 } 43 44 .bottom { 45 background-color: transparent; 46 transform: rotateX(-90deg) translateZ(150px); 47 } 48 49 .before { 50 background-color: transparent; 51 transform: translateZ(150px); 52 } 53 54 .back { 55 background-color: transparent; 56 transform: translateZ(-150px); 57 } 58 59 li { 60 float: left; 61 width: 90px; 62 height: 90px; 63 border-radius: 20px; 64 margin: 5px; 65 text-align: center; 66 line-height: 90px; 67 } 68 69 .before li { 70 background-color: green; 71 } 72 .back li { 73 background-color:chartreuse; 74 } 75 76 .top li { 77 background-color: purple; 78 } 79 80 .bottom li { 81 background-color: cornflowerblue; 82 } 83 84 .left li { 85 background-color: darkorange; 86 } 87 88 .right li { 89 background-color: #37ffc7; 90 } 91 92 .box:hover { 93 animation-play-state: paused; 94 } 95 96 @keyframes rotate { 97 0% { 98 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 99 } 100 101 20% { 102 transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg); 103 } 104 105 40% { 106 transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg); 107 } 108 109 60% { 110 transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg); 111 } 112 113 80% { 114 transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg); 115 } 116 117 100% { 118 transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg); 119 } 120 } 121 </style> 122 </head> 123 <body> 124 <div class="box"> 125 <div class="before"> 126 <ul> 127 <li>1</li> 128 <li>2</li> 129 <li>3</li> 130 <li>4</li> 131 <li>5</li> 132 <li>6</li> 133 <li>7</li> 134 <li>8</li> 135 <li>9</li> 136 </ul> 137 </div> 138 <div class="back"> 139 <ul> 140 <li>1</li> 141 <li>2</li> 142 <li>3</li> 143 <li>4</li> 144 <li>5</li> 145 <li>6</li> 146 <li>7</li> 147 <li>8</li> 148 <li>9</li> 149 </ul> 150 </div> 151 <div class="top"> 152 <ul> 153 <li>1</li> 154 <li>2</li> 155 <li>3</li> 156 <li>4</li> 157 <li>5</li> 158 <li>6</li> 159 <li>7</li> 160 <li>8</li> 161 <li>9</li> 162 </ul> 163 </div> 164 <div class="bottom"> 165 <ul> 166 <li>1</li> 167 <li>2</li> 168 <li>3</li> 169 <li>4</li> 170 <li>5</li> 171 <li>6</li> 172 <li>7</li> 173 <li>8</li> 174 <li>9</li> 175 </ul> 176 </div> 177 <div class="left"> 178 <ul> 179 <li>1</li> 180 <li>2</li> 181 <li>3</li> 182 <li>4</li> 183 <li>5</li> 184 <li>6</li> 185 <li>7</li> 186 <li>8</li> 187 <li>9</li> 188 </ul> 189 </div> 190 <div class="right"> 191 <ul> 192 <li>1</li> 193 <li>2</li> 194 <li>3</li> 195 <li>4</li> 196 <li>5</li> 197 <li>6</li> 198 <li>7</li> 199 <li>8</li> 200 <li>9</li> 201 </ul> 202 </div> 203 </div> 204 </body> 205 </html>