昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示
在这里把做法展现出来
感兴趣的可以试试 做成自己特有的魔方
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <style> 7 /*最外层容器样式*/ 8 .wrap { 9 width: 200px; 10 height: 200px; 11 margin: 200px; 12 position: relative; 13 } 14 15 /*包裹所有容器样式*/ 16 .cube { 17 width: 200px; 18 height: 200px; 19 margin: 0 auto; 20 transform-style: preserve-3d; 21 transform: rotateX(-30deg) rotateY(-80deg); 22 animation: rotate linear 20s infinite; 23 } 24 25 @-webkit-keyframes rotate { 26 from { 27 transform: rotateX(0deg) rotateY(0deg); 28 } 29 to { 30 transform: rotateX(360deg) rotateY(360deg); 31 } 32 } 33 34 .cube div { 35 position: absolute; 36 width: 200px; 37 height: 200px; 38 opacity: 0.8; 39 transition: all .4s; 40 } 41 42 /*定义所有图片样式*/ 43 .pic { 44 width: 200px; 45 height: 200px; 46 } 47 48 .cube .out_front { 49 transform: rotateY(0deg) translateZ(100px); 50 } 51 52 .cube .out_back { 53 transform: translateZ(-100px) rotateY(180deg); 54 } 55 56 .cube .out_left { 57 transform: rotateY(-90deg) translateZ(100px); 58 } 59 60 .cube .out_right { 61 transform: rotateY(90deg) translateZ(100px); 62 } 63 64 .cube .out_top { 65 transform: rotateX(90deg) translateZ(100px); 66 } 67 68 .cube .out_bottom { 69 transform: rotateX(-90deg) translateZ(100px); 70 } 71 72 /*定义小正方体样式*/ 73 .cube span { 74 display: block; 75 width: 100px; 76 height: 100px; 77 position: absolute; 78 top: 50px; 79 left: 50px; 80 } 81 82 .cube .in_pic { 83 width: 100px; 84 height: 100px; 85 } 86 87 .cube .in_front { 88 transform: rotateY(0deg) translateZ(50px); 89 } 90 91 .cube .in_back { 92 transform: translateZ(-50px) rotateY(180deg); 93 } 94 95 .cube .in_left { 96 transform: rotateY(-90deg) translateZ(50px); 97 } 98 99 .cube .in_right { 100 transform: rotateY(90deg) translateZ(50px); 101 } 102 103 .cube .in_top { 104 transform: rotateX(90deg) translateZ(50px); 105 } 106 107 .cube .in_bottom { 108 transform: rotateX(-90deg) translateZ(50px); 109 } 110 111 /*鼠标移入后样式*/ 112 .cube:hover .out_front { 113 transform: rotateY(0deg) translateZ(200px); 114 } 115 116 .cube:hover .out_back { 117 transform: translateZ(-200px) rotateY(180deg); 118 } 119 120 .cube:hover .out_left { 121 transform: rotateY(-90deg) translateZ(200px); 122 } 123 124 .cube:hover .out_right { 125 transform: rotateY(90deg) translateZ(200px); 126 } 127 128 .cube:hover .out_top { 129 transform: rotateX(90deg) translateZ(200px); 130 } 131 132 .cube:hover .out_bottom { 133 transform: rotateX(-90deg) translateZ(200px); 134 } 135 </style> 136 </head> 137 138 <body> 139 <!-- 外层最大容器 --> 140 <div class="wrap"> 141 <!--包裹所有元素的容器--> 142 <div class="cube"> 143 <!--前面图片 --> 144 <div class="out_front"> 145 <img src="https://img-blog.csdn.net/20170716094246620" class="pic" /> 146 </div> 147 <!--后面图片 --> 148 <div class="out_back"> 149 <img src="https://img-blog.csdn.net/20170716094334594" class="pic" /> 150 </div> 151 <!--左面图片 --> 152 <div class="out_left"> 153 <img src="https://img-blog.csdn.net/20170716094400013" class="pic" /> 154 </div> 155 <!--右面图片 --> 156 <div class="out_right"> 157 <img src="https://img-blog.csdn.net/20170716094422331" class="pic" /> 158 </div> 159 <!--上面图片 --> 160 <div class="out_top"> 161 <img src="https://img-blog.csdn.net/20170716094444434" class="pic" /> 162 </div> 163 <!--下面图片 --> 164 <div class="out_bottom"> 165 <img src="https://img-blog.csdn.net/20170716094504432" class="pic" /> 166 </div> 167 168 <!--小正方体 --> 169 <span class="in_front"> 170 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /> 171 </span> 172 <span class="in_back"> 173 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /> 174 </span> 175 <span class="in_left"> 176 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /> 177 </span> 178 <span class="in_right"> 179 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /> 180 </span> 181 <span class="in_top"> 182 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /> 183 </span> 184 <span class="in_bottom"> 185 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /> 186 </span> 187 </div> 188 189 </div> 190 </body> 191 192 </html>
下面是效果图
其中难点:
transform-style: preserve-3d;
使被转换的子元素保留其 3D 转换:
参考链接 http://www.runoob.com/cssref/css3-pr-transform-style.html
css动画 http://www.runoob.com/css3/css3-animations.html
摘自:http://m.blog.csdn.net/FE_dev/article/details/75142505
2017-11-30 08:26:45