在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图

第一步非常简单,就是先将魔方的结构画出来。大家都玩过魔方,知道魔方是一个有六个面的正方体。这里我们先写一个大的div(类名为box)作为容器,里面包含魔方6个面,即6个div,然后我这里每个面里还分了9个小div就是9个小格子。代码如下,简单看看

        <!-- 魔方六面 -->
<div class="box">
<div class="aside"> <!--魔方第一个面,类名aside-->
<div></div>  <!--第一个面里的每一个小格子-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
...<!--魔方另外五个面代码和第一个面一样,此处省略-->
</div>

第二步,有了魔方的结构,我们开始给魔方上色。我们直接看代码,简单粗暴~

.aside{
width: 180px;      
height: 180px;      /* 这里定义每个面长宽都是180px */
position: absolute;   /* 设置绝对定位,方便后面控制每个面的位置*/
transform: translatez(0px);  /*对这个面进行位置的移动*/
}
.aside div{
width: 54px;   
height: 54px;    
border-radius: 4px;  /*设置圆角才能看到格子与格子间的小孔*/
float: left;  
border: 3px solid #000;  /* 这里定义每个格子的边框是3px 所以一个格子总的长宽是54+3+3=60px 一行3个格子60*3=180px 一列同理 */
background: green;  /*上色*/
}

第三步,我们画了这么久魔方,你把文件放到浏览器一看,结果发现连个魔方的影都没有? 不急。我们首先需要在父容器上添加 transform-style: preserve-3d; 这句代码很关键,让该元素的子元素看起来变成3D效果,默认是平面效果(2D),(具体请看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

好,添加了这句代码以后,我们要开始移动6个面,使之组合后看起来是个正方体。移动6个面无非就是以下几句代码

/*向X轴正方向平移80px长度、向Y轴负方向平移80PX、向Z轴正方向平移90px*/
transform: translatex(80px) translatey(-80px) translatez(90px);
/*向X轴顺时针转动30度(℃)、向Y轴顺时针转动45度、向Z轴逆时针转动90度*/
transform:rotatex(30deg) rotatey(45deg) rotatez(-90deg);

什么?你说浏览器不兼容?自己加相应前缀即可,这里不详细讨论。栗子(-webkit-transform:rotatex(30deg);)

自己打开浏览器F12慢慢调试自己想要的角度。这里贴上我自己的代码仅供参考~

.box{
animation: cube_animation ease-in-out 6s infinite forwards; /*魔方动画设置*/
transform-style: preserve-3d;  /*3d渲染*/
transform-origin: 90px 90px 90px;
}
/*魔方动画效果*/
@keyframes cube_animation{
    from,to{}
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }
}
/*魔方六面*/
.aside{
width: 180px;
height: 180px;
position: absolute; } .bside{
width: 180px;
height: 180px;
position: absolute;
  /*魔方的B面,先向左平移90px,再靠近人脸90px,最后y轴顺时针90度*/
transform: translatex(-90px) translatez(90px) rotatey(90deg);
} .cside{
width: 180px;
height: 180px;
position: absolute;
transform: translatez(90px) translatey(90px) rotatex(90deg);
} .dside{
width: 180px;
height: 180px;
position: absolute;
transform: translatez(180px);
} .eside{
width: 180px;
height: 180px;
position: absolute;
transform: translatez(90px) translatey(-90px) rotatex(90deg);
}

话说哪怕做到这里,其实还是不能很好的看到魔方全貌。

好吧,放大招,在父容器中添加perspective:1000px;perspective-origin:25% 75%;

然后慢慢在浏览器F12调试数值看看有什么变化~ 最后还有个动画效果,代码我已经贴在上面了,具体动画原理我改天再另写一篇博客~ 谢谢你看到这里。如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知 ending~

   

css3之3D魔方动画(小白版)的更多相关文章

  1. 【CSS3】3D立方体动画

    关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...

  2. 如何用CSS3画出懂你的3D魔方?

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

  3. CSS3实现魔方动画

    本文将借助css3实现魔方动画效果,设计思路如下: HTML方面采用六个div容器形成六个立方面: CSS方面采用transform-style: preserve-3d;形成三维场景:transfo ...

  4. 纯CSS3实现3D特效的iPhone 6动画

    iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示    ...

  5. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  6. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  7. 用CSS3做3D动画的那些事

    年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...

  8. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  9. css3图书3D动画

    css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

  1. JSON格式序列化与反序列化(List、XML)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  2. Distinct Subsequences

    https://leetcode.com/problems/distinct-subsequences/ Given a string S and a string T, count the numb ...

  3. PHP 数据库连接工具类(MySQLI函数包装)

    ====================mysql===================== <?php class mysql { private $mysqli; private $resu ...

  4. SQL批量增加修改数据

    insert into A表(字段1,字段2) select 字段1,字段2 From B表 [注:字段类型.字段数应相同] --批量进行修改ID值 declare @i int begin )) F ...

  5. java文件下载和导出文件名乱码浏览器兼容性问题

    实例: String poorName= dataMap.get("NAME").toString(); String villageName = dataMap.get(&quo ...

  6. 如何正确的做WEB端的压力测试

    1.对要测试的系统进行分析,明确需要对哪一块做压力测试.比如:淘宝网站双十一期间,秒杀跟支付,此模式用户操作中占比比较大 再比如:游戏,登录--开始战斗--结束战斗这种混合模式在用户操作中占比较大 那 ...

  7. CISCO VLAN ACL

    对于cisco VLAN ACL 首先得定义 standard ACL或 extented ACL用于抓取流量 注意这里的抓取流量不是最终的对流量的操作,而是决定什么样的流量用VLAN ACL 来处理 ...

  8. 文件上传大小js判断

    function fileChange(target) { var fileSize = 0; if (isIE && !target.files) { var filePath = ...

  9. Linux定时任务

    定时任务:1.目录/var/spool/cron2:查看当前用户的定时任务[oracle@localhost ~]$ crontab -l* * * * * /home/oracle/test.sh ...

  10. 【用xocde5打包 在IOS7以下也能显示无默认gloss 效果 图解】

    图解,只需要这几个地方修改以下就好了,看不懂的话,请留言 完毕:记着clean 以下项目文件