博客样式(旋转的立方体)
代码:
1 <style> 2 /*最外层容器样式*/ 3 .wrap { 4 width: 100px; 5 height: 100px; 6 margin: 150px; 7 position: relative; 8 } 9 10 /*包裹所有容器样式*/ 11 .cube { 12 width: 50px; 13 height: 50px; 14 margin: 0 auto; 15 transform-style: preserve-3d; 16 transform: rotateX(-30deg) rotateY(-80deg); 17 animation: rotate linear 20s infinite; 18 } 19 20 @-webkit-keyframes rotate { 21 from { 22 transform: rotateX(0deg) rotateY(0deg); 23 } 24 to { 25 transform: rotateX(360deg) rotateY(360deg); 26 } 27 } 28 29 .cube div { 30 position: absolute; 31 width: 200px; 32 height: 200px; 33 opacity: 0.8; 34 transition: all .4s; 35 } 36 37 /*定义所有图片样式*/ 38 .pic { 39 width: 200px; 40 height: 200px; 41 } 42 43 .cube .out_front { 44 transform: rotateY(0deg) translateZ(100px); 45 } 46 47 .cube .out_back { 48 transform: translateZ(-100px) rotateY(180deg); 49 } 50 51 .cube .out_left { 52 transform: rotateY(-90deg) translateZ(100px); 53 } 54 55 .cube .out_right { 56 transform: rotateY(90deg) translateZ(100px); 57 } 58 59 .cube .out_top { 60 transform: rotateX(90deg) translateZ(100px); 61 } 62 63 .cube .out_bottom { 64 transform: rotateX(-90deg) translateZ(100px); 65 } 66 67 /*定义小正方体样式*/ 68 .cube span { 69 display: block; 70 width: 100px; 71 height: 100px; 72 position: absolute; 73 top: 50px; 74 left: 50px; 75 } 76 77 .cube .in_pic { 78 width: 100px; 79 height: 100px; 80 } 81 82 .cube .in_front { 83 transform: rotateY(0deg) translateZ(50px); 84 } 85 86 .cube .in_back { 87 transform: translateZ(-50px) rotateY(180deg); 88 } 89 90 .cube .in_left { 91 transform: rotateY(-90deg) translateZ(50px); 92 } 93 94 .cube .in_right { 95 transform: rotateY(90deg) translateZ(50px); 96 } 97 98 .cube .in_top { 99 transform: rotateX(90deg) translateZ(50px); 100 } 101 102 .cube .in_bottom { 103 transform: rotateX(-90deg) translateZ(50px); 104 } 105 106 /*鼠标移入后样式*/ 107 .cube:hover .out_front { 108 transform: rotateY(0deg) translateZ(200px); 109 } 110 111 .cube:hover .out_back { 112 transform: translateZ(-200px) rotateY(180deg); 113 } 114 115 .cube:hover .out_left { 116 transform: rotateY(-90deg) translateZ(200px); 117 } 118 119 .cube:hover .out_right { 120 transform: rotateY(90deg) translateZ(200px); 121 } 122 123 .cube:hover .out_top { 124 transform: rotateX(90deg) translateZ(200px); 125 } 126 127 .cube:hover .out_bottom { 128 transform: rotateX(-90deg) translateZ(200px); 129 } 130 </style> 131 132 133 <!-- 外层最大容器 --> 134 <div class="wrap"> 135 <!--包裹所有元素的容器--> 136 <div class="cube"> 137 <!--前面图片 --> 138 <div class="out_front"> 139 <img src="https://i.loli.net/2018/05/03/5aeb0eef73838.jpg" class="pic"> 140 </div> 141 <!--后面图片 --> 142 <div class="out_back"> 143 <img src="https://i.loli.net/2018/05/03/5aeb0f2fb9a83.jpg" class="pic"> 144 </div> 145 <!--左面图片 --> 146 <div class="out_left"> 147 <img src="https://i.loli.net/2018/05/03/5aeb0f55411f0.jpg" class="pic"> 148 </div> 149 <!--右面图片 --> 150 <div class="out_right"> 151 <img src="https://i.loli.net/2018/05/03/5aeb0f79a1124.jpg" class="pic"> 152 </div> 153 <!--上面图片 --> 154 <div class="out_top"> 155 <img src="https://i.loli.net/2018/05/03/5aeb0f98a8b66.jpg" class="pic"> 156 </div> 157 <!--下面图片 --> 158 <div class="out_bottom"> 159 <img src="https://i.loli.net/2018/05/03/5aeb0fdd51b7e.jpg" class="pic"> 160 </div> 161 162 <!--小正方体 --> 163 <span class="in_front"> 164 <img src="https://i.loli.net/2018/05/03/5aeb100223dd0.jpg" class="in_pic"> 165 </span> 166 <span class="in_back"> 167 <img src="https://i.loli.net/2018/05/03/5aeb101c2c24b.jpg" class="in_pic"> 168 </span> 169 <span class="in_left"> 170 <img src="https://i.loli.net/2018/05/03/5aeb1038127b5.jpg" class="in_pic"> 171 </span> 172 <span class="in_right"> 173 <img src="https://i.loli.net/2018/05/03/5aeb0dce1ca55.jpg" class="in_pic"> 174 </span> 175 <span class="in_top"> 176 <img src="https://i.loli.net/2018/05/03/5aeb1057bb167.jpg" class="in_pic"> 177 </span> 178 <span class="in_bottom"> 179 <img src="https://i.loli.net/2018/05/03/5aeb107514579.jpg" class="in_pic"> 180 </span> 181 </div> 182 183 </div>
结果:（图片可以自己换）
