在这里分享一下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. Android:控件AutoCompleteTextView 自动提示

    在文本框中输入,要这样的提示效果,如果你输入的是aac,在输入aa后,选择aac,文本框的内容会自动补齐,输入aac(类似百度搜索文本框的显示结果)   <AutoCompleteTextVie ...

  2. [BZOJ3729]Gty的游戏

    [BZOJ3729]Gty的游戏 试题描述 某一天gty在与他的妹子玩游戏.妹子提出一个游戏,给定一棵有根树,每个节点有一些石子,每次可以将不多于L的石子移动到父节点,询问将某个节点的子树中的石子移动 ...

  3. PHP生成日历数组,减少分页

    2016年11月14日 20:45:41 星期一 情景, 每个用户设置定投, app的屏幕比较小, 觉得常规的线性分页下拉不是很方便 吧列表改为日历格式的会更方便执行, 每年12个月, 总过12个页面 ...

  4. 离线安装 Python 2.7, paramiko 和 tornado

    无非就是离线安装, 步骤比较繁琐, 记录一下. 需求很简单, 一个离线安装的 Python, 能跑 tornado 和 paramiko 1. 离线安装 Python 2.7 .tgz cd Pyth ...

  5. 如何解决System.Web.HttpRequestValidationException的异常

    在.net framework 4.0版本以下, 只需要在web.config中进行如下配置: <configuration>    <system.web>        & ...

  6. MFC 按钮如何改变颜色

    我们发现想改变对话框的背景颜色是很简单的,但是对话框的背景颜色改变了后,我们发现按钮的颜色没有改变,如下图. 这样做出来的对话框看起来,不是很自然,我们也想把按钮的颜色改变一下.这就用到了按钮的重绘. ...

  7. 【笔记】读取properties文件

    package com.bshinfo.el.userInfo.util; import java.io.BufferedReader; import java.io.File; import jav ...

  8. 预处理指令 #import

    vs class # import会包含这个类的所有信息,包括实体变量和方法, # @class只是告诉编译器,其后面声明的名称是类的名称,至于这些类是如何定义的,先不考虑.

  9. python爬虫成长之路(二):抓取代理IP并多线程验证

    上回说到,突破反爬虫限制的方法之一就是多用几个代理IP,但前提是我们得拥有有效的代理IP,下面我们来介绍抓取代理IP并多线程快速验证其有效性的过程. 一.抓取代理IP 提供免费代理IP的网站还挺多的, ...

  10. retrofit使用随记

    1.请求接口 public interface RetrofitApi { /*注册*/ /*登录*/ @FormUrlEncoded //post请求带这个 @POST("url" ...