博客样式(旋转的立方体)

Posted 2020-12-30 trojan00

代码:

 

  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>

 

 

结果:（图片可以自己换）