zoukankan html css js c++ java

纯CSS做3D旋转魔方

昨天偶然看见网友（简单说用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="http://img.blog.csdn.net/20170716094246620" class="pic" />
146             </div>
147             <!--后面图片 -->
148             <div class="out_back">
149                 <img src="http://img.blog.csdn.net/20170716094334594" class="pic" />
150             </div>
151             <!--左面图片 -->
152             <div class="out_left">
153                 <img src="http://img.blog.csdn.net/20170716094400013" class="pic" />
154             </div>
155             <!--右面图片 -->
156             <div class="out_right">
157                 <img src="http://img.blog.csdn.net/20170716094422331" class="pic" />
158             </div>
159             <!--上面图片 -->
160             <div class="out_top">
161                 <img src="http://img.blog.csdn.net/20170716094444434" class="pic" />
162             </div>
163             <!--下面图片 -->
164             <div class="out_bottom">
165                 <img src="http://img.blog.csdn.net/20170716094504432" class="pic" />
166             </div>
167  
168             <!--小正方体 -->
169             <span class="in_front">
170                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
171             </span>
172             <span class="in_back">
173                  <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
174             </span>
175             <span class="in_left">
176                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
177             </span>
178             <span class="in_right">
179                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
180             </span>
181             <span class="in_top">
182                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
183             </span>
184             <span class="in_bottom">
185                 <img src="http://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

查看全文

相关阅读:
项目积累——导出数据
 项目积累——POPUP
项目积累——jQuery
项目积累——集合相关知识
 项目积累——关于时间显示和格式的几种方式
 项目积累——综合
 项目积累——js应用
 项目积累——CSS应用
 图
 平衡二叉树

原文地址：https://www.cnblogs.com/angelye/p/7927307.html