昨天偶然看见网友（简单说 用CSS做一个魔方旋转的效果）做的一个3D旋转魔方  效果就是本博客右侧公告栏所示

在这里把做法展现出来

感兴趣的可以试试  做成自己特有的魔方

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <style>

         /*最外层容器样式*/

         .wrap {

             width: 200px;

             height: 200px;

             margin: 200px;

             position: relative;

         }

         /*包裹所有容器样式*/

         .cube {

             width: 200px;

             height: 200px;

             margin: 0 auto;

             transform-style: preserve-3d;

             transform: rotateX(-30deg) rotateY(-80deg);

             animation: rotate linear 20s infinite;

         }

         @-webkit-keyframes rotate {

             from {

                 transform: rotateX(0deg) rotateY(0deg);

             }

             to {

                 transform: rotateX(360deg) rotateY(360deg);

             }

         }

         .cube div {

             position: absolute;

             width: 200px;

             height: 200px;

             opacity: 0.8;

             transition: all .4s;

         }

         /*定义所有图片样式*/

         .pic {

             width: 200px;

             height: 200px;

         }

         .cube .out_front {

             transform: rotateY(0deg) translateZ(100px);

         }

         .cube .out_back {

             transform: translateZ(-100px) rotateY(180deg);

         }

         .cube .out_left {

             transform: rotateY(-90deg) translateZ(100px);

         }

         .cube .out_right {

             transform: rotateY(90deg) translateZ(100px);

         }

         .cube .out_top {

             transform: rotateX(90deg) translateZ(100px);

         }

         .cube .out_bottom {

             transform: rotateX(-90deg) translateZ(100px);

         }

         /*定义小正方体样式*/

         .cube span {

             display: block;

             width: 100px;

             height: 100px;

             position: absolute;

             top: 50px;

             left: 50px;

         }

         .cube .in_pic {

             width: 100px;

             height: 100px;

         }

         .cube .in_front {

             transform: rotateY(0deg) translateZ(50px);

         }

         .cube .in_back {

             transform: translateZ(-50px) rotateY(180deg);

         }

         .cube .in_left {

             transform: rotateY(-90deg) translateZ(50px);

         }

         .cube .in_right {

             transform: rotateY(90deg) translateZ(50px);

         }

         .cube .in_top {

             transform: rotateX(90deg) translateZ(50px);

         }

         .cube .in_bottom {

             transform: rotateX(-90deg) translateZ(50px);

         }

         /*鼠标移入后样式*/

         .cube:hover .out_front {

             transform: rotateY(0deg) translateZ(200px);

         }

         .cube:hover .out_back {

             transform: translateZ(-200px) rotateY(180deg);

         }

         .cube:hover .out_left {

             transform: rotateY(-90deg) translateZ(200px);

         }

         .cube:hover .out_right {

             transform: rotateY(90deg) translateZ(200px);

         }

         .cube:hover .out_top {

             transform: rotateX(90deg) translateZ(200px);

         }

         .cube:hover .out_bottom {

             transform: rotateX(-90deg) translateZ(200px);

         }

     </style>

 </head>

 <body>

     <!-- 外层最大容器 -->

     <div class="wrap">

         <!--包裹所有元素的容器-->

         <div class="cube">

             <!--前面图片 -->

             <div class="out_front">

                 <img src="http://img.blog.csdn.net/20170716094246620" class="pic" />

             </div>

             <!--后面图片 -->

             <div class="out_back">

                 <img src="http://img.blog.csdn.net/20170716094334594" class="pic" />

             </div>

             <!--左面图片 -->

             <div class="out_left">

                 <img src="http://img.blog.csdn.net/20170716094400013" class="pic" />

             </div>

             <!--右面图片 -->

             <div class="out_right">

                 <img src="http://img.blog.csdn.net/20170716094422331" class="pic" />

             </div>

             <!--上面图片 -->

             <div class="out_top">

                 <img src="http://img.blog.csdn.net/20170716094444434" class="pic" />

             </div>

             <!--下面图片 -->

             <div class="out_bottom">

                 <img src="http://img.blog.csdn.net/20170716094504432" class="pic" />

             </div>

             <!--小正方体 -->

             <span class="in_front">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_back">

                  <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_left">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_right">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_top">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_bottom">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

         </div>

     </div>

 </body>

 </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

纯CSS做3D旋转魔方的更多相关文章

  1. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  2. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  3. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  4. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  5. 纯CSS实现3D图像轮转

    CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...

  6. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  7. 纯CSS实现立方体旋转

    下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...

  8. 纯CSS绘制3D立方体

    本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...

  9. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

随机推荐

  1. AT&T 和 Intel

  2. Python版本号比较函数 LooseVersion 和StrictVersion

  3. Kendo UI for jQuery使用教程：小部件DOM元素结构

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  4. Spring MVC 设置UTF-8编码

    按照需求选其中之一即可吧. 修改读取参数时候的编码: 在web.xml中: 添加一个过滤器(filter),注册 org.springframework.web.filter.CharacterEnc ...

  5. dlerror和dlclose用法

    dlclose() 1. 包含头文件 #include<dlfcn.h> 2. 函数定义  int dlclose(void *handle) dlclose用于关闭指定句柄的动态链接库, ...

  6. JSR303定义的校验类型

    空检查 @Null       验证对象是否为null @NotNull    验证对象是否不为null, 无法查检长度为0的字符串 @NotBlank 检查约束字符串是不是Null还有被Trim的长 ...

  7. 输出1~n中1的个数

    //输出1~n中1的个数,如f(1)=1,f(13)=6.通过测试,bymyself public class FindOnes{ public static void main(String arg ...

  8. 简单加密 DEncrypt

    /// <summary> /// Encrypt 的摘要说明. /// </summary> public class DEncrypt { /// <summary& ...

  9. R_Studio(关联)对dvdtrans.csv数据进行关联规则分析

    dvdtrans.csv数据:该原始数据仅仅包含了两个字段(ID, Item) 用户ID,商品名称(共30条) #导入arules包 #install.packages("arules&qu ...

  10. windows基础提权

    Window基础提权 提到system权限 甚至让他变成你的肉鸡 我们了解一下windows下面有那些用户 Guests是用户最低的权限 而且一般是被禁用的 User权限也很低 连关机都不行 还有wi ...