CSS3动画之3D动画
所有东西一跟3D扯上关系,复杂指数都是噌噌噌往上走。不过也正常,毕竟多了一个维度,要有三维应有的尊严。
3D Transforms要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?点进来,答案都在这里面。
很多时候,仅仅将元素进行二维层面的变换显然不是人类的终点,毕竟十二维空间都可能不是极限(视频: 从一维空间到十二维空间)。
Intro to 3D Transforms 的作者David DeSandro 说,现在可是21世纪,可我们竟然还在跟三十年前的二维空间界面扯皮。所幸2011年,我们有了CSS3,我们还有了3D Transforms,真是一个值得奔走相告的大事件。
Transform 2d 3d
3D变换相较2D变换,坐标系中多了Z轴,也就意味着物体除了上下左右,还可以前后移动。而rotate在2D中的旋转方式,在3D中与rotateZ相当。
那么,单纯地将transform中的参数扩展出Z维度,就能实现3D效果了吗?我看见CSS3笑了。
perspective 概念理解
什么是perspective?词典中翻译为观点、远景、透视图。这是一个非常抽象的概念,需要一点空间想象力。
我们先抛开这个概念,尝试使用刚才说到的知识点进行翻牌(咦)效果的尝试,聪明的你一定分分钟码出来:
123456 |
<div id="card"> <!-- 卡牌正面 --> <figure class="front">1</figure> <!-- 卡牌反面 --> <figure class="back">2</figure></div> |
123456789101112 |
#card .front { background: red;}#card .back { background: blue; transform: rotateY( 180deg );} /* 翻牌动作 */#card.flipped { transform: rotateY( 180deg );} |
但是放浏览器一看,这不对呀,为什么用3D的代码写出了2D的效果。
这个时候有请我们的perspective透视君。
学过素描的人一定对透视的概念不陌生,透视是保证素描写生真实合理的基础。
视频:透视学之一点透视法
CSS3中的perspetive在这样一个体系里就代表着元素与观者之间的距离,形象点说,就是元素3D效果的强度。CSS3中的3D效果消失点固定,变化的是观者与元素之间的距离。不过perspective数值与3D效果强度是成反比的,数值越大,元素的3D效果越不明显——2000px的视点意味着你看的是远方的物体,而100px则意味着这个物体就在你眼前。
这里有个图或许能帮助我们想象3D效果强度这个概念——
(图片来源:维基百科)
如果还是不懂,还有一个办法,就是在浏览器中边调整perspective数值边观察3D效果。
消失点
(图片来源:Intro to CSS 3D transforms - Perspective)
左图与右图的元素均绕Y轴旋转了45度,但差别很明显,右图更容易让人想到一个画面中集体开启的窗户。左图的问题就在于,每个元素的消失点各自为政,都在元素的中心点位置,而右图的消失点则统一在实线方框的中心位置。实现方法就是将元素的perspetive设置转移至元素父容器上。
讲到这里,这种简单的3D其实在很多非立体设计的触屏页中已经够用,稍微使用一点就能产生非凡的效果,比如D Rose触屏案例。
明眼人会说,这样子可以画个正方体出来了也。我看见CSS3又笑了。
建立三维空间体系
现实总是乳齿残酷
有了perspetive属性,我们顶多是一群会在纸上画素描的家伙,要想徒手造模型,还是太嫩。就拿刚才的翻牌效果来说,如果你翻滚card父容器,无论怎么翻,能看到的只有正面的卡片,因为现在的体系就是一张素描绘画,你拿着再逼真的素描画翻到背面,也是看不到真实物体的背面的对吧。超越平面3D的关隘就在于transform-style: preserve-3d的属性设置,默认值为flat,即“素描作品”。这个属性的设置旨在告诉子元素需要遵循怎样的空间体系规则。这个属性不能继承,因此只要有子元素需要设置空间体系规则,就得在父元素声明这个属性。
有了浏览器为我们处理空间体系规则,可以省不少事,不需要你担心层级问题、不需要你操心哪个元素转到哪里要消失哪个元素转到哪里要出现,嗯,小编从没自己这么干过,从没。
从翻牌到翻书
翻牌那是皇帝干的事儿,我们文化人得翻书。刚才的翻牌都是在方块的中部为轴进行的变换,我们把变换原点一换,就变成书页在翻了。
一本合上的书正常来说是在Y轴右侧,每一页都包含两面,也就是说一本书是由若干个翻页效果组合而成,每一页的变换原点在元素左侧。由此可以在翻牌的基础上迅速整出一个翻书demo(猛戳查看翻书demo)。
阴影的使用能让翻书效果变得更真实
(猛戳查看demo)
3D动画之Hard Level:立体书
立体书在外国叫Pop-Up Book,满满的“Surprise!”感。这种超越传统平面书籍的阅读模式常被用于儿童书籍。
(图片来源:A Guided Tour of THE MEL BIRNKRANT COLLECTION)
要用CSS3实现这种效果,想想还有点小激动。
首先建立一个立体书规则:
书开,元素起
元素竖起速度小于等于书页开启速度
元素折叠后不可露出书边
元素层叠关系不可反自然
剩下的事也就水到渠成,无非是在每一页建立3D体系、立体元素从rotateX(90deg)转换到rotateX(0deg)的事儿。
(Mozzilla的小demo)
小编曾做过一个丧心病狂的立体书触屏页,由于立体书左右两页互相关联的特性,翻牌的方式不太适合用在这里,这里使用的是另一种较为麻烦的方式——不像翻牌方式中的前后两页捆绑,这里的书页左右两页属于一个3D体系,通过translateZ值的变换控制层级关系,因为在3D体系里,z-index已被抛弃。
猛戳进入:麦芒推广页
终端支持
由于截至目前为止,CSS3的3D功能还止于炫技的阶段,安卓机与iOS的支持效果存在差异且难以调和,从上面那个案例中肉眼可见的坑就能看出,因此除了简单的3D转换,不建议在大项目中大面积使用3D深层功能。
3D与硬件加速
坊间流传这这样一个传说:一旦使用3D属性,就能触发设备的硬件加速,从而使得浏览器的表现更佳。但这句话也得看情境——
想象使用GPU加速的动画就像是Vin Diesel(速度与激情的主角)开着Dominic标志性的汽车 —— Dodge Charger。它的定制900 hp引擎可以让它在一瞬间从0加速到60码。但是如果你开着它在拥挤的高速公路上又有什么用呢?这种情况下你选择的车辆Charger是正确的。但是问题是你还在一个拥堵的高速公路上。——《CSS硬件加速的好与坏》
因此千万别贪心,将3D效果数量控制在一定范围内,页面性能才是重中之重。——来自得到惨痛教训的小编的忠告
参考资料:
Intro to CSS3 3D transforms by David DeSandro ——详尽又新鲜的3D Transformers手册,包含许多一看就懂的小Demo,妈妈再也不用担心我的3D了。
Perspective (graphical)——对透视学还一知半解的可以看看维基的详细说明。
Unfolding the Box Model: Exploring CSS 3D Transforms by Chris Ruppel ——非常赞的3D Transforms介绍,从2D到3D过渡,启动联想学习法,一看就明白,就怕你不看。
CSS硬件加速的好与坏——很多事情都不是一两句能讲清楚的,但是只要深入了解原理,一两句都不用讲就清楚了。
拇指期刊·第8期·CSS3动画开发手册
《CSS3动画之补间动画》
《CSS3动画之逐帧动画》
《CSS3动画之3D动画》
CSS3动画之3D动画相关推荐
- iOS动画:3D动画(18)
根据图示创建动画,当点击菜单按钮时,需要显示左侧菜单栏 效果看起来就像一个3D动画.现在我们来实现这种效果. 打开工程中的ContainerViewController.swift,创建3D变换函数: ...
- 第一个用计算机动画模拟的商品是,三维动画(3D动画)在各个领域的应用
随着计算机图形学技术的不断进步,计算机在动画制作中发挥着越来越大的作用,如今已形成完整的计算机动画技术,它集计算机图形.摄影.美术.音乐.编导.剪辑为一体,为动画的制作提供了现代化的手段,使动画真正步 ...
- CSS3动画和3D动画
动画属性 :animation 1.animation-name (必要的)检索或设置对象所应用的动画名,必须与规则@keyframes配合使用, 定义关键帧: @keyframes mymove{} ...
- android 实现3d动画,安卓3d动画的简单实现1
Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现.这里我列举一个最简单翻转动画的例子. 创建一个activity,布局就用最简单的,里面放一个textView ...
- css3实现3D动画
使用 CSS3 可以实现 3D 动画效果.要实现 3D 动画,需要使用 CSS3 中的 transform 属性. 要将一个元素变为 3D 元素,可以使用 transform: perspective ...
- 视觉盛宴 HTML5 3D动画应用赏析
以下是一些很棒的HTML5 3D动画应用,值得一看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是 ...
- Android 动画介绍及自定义3D动画效果的基本使用
导语 Android的动画框架包括帧动画.视图动画(又叫补间动画).属性动画.在Android3.0之前,视图动画一家独大,但随之后属性动画框架被推出.相比属性动画,视图动画一个非常大的缺陷就是不具备 ...
- maya扇子动画_MAYA制作动画的十大原理!
什么是三维动画? 三维动画又称3D动画,主要应用在影视领域,比如大家都很熟悉的动画作品,2015年7月份上映的<大圣归来>和2019年上映的<哪吒>再次掀起了国内制作动漫的热潮 ...
- Unity3D游戏开发之使用Mecanim动画系统控制2D动画
各位朋友,大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是http://blog.csdn.net/qinyuanpei.博主今天想和大家分享的是在Unity3D中使用Mecanim动画系统来 ...
最新文章
- 【BZOJ 1095】 1095: [ZJOI2007]Hide 捉迷藏 (括号序列+线段树)
- Android 事件分发面试
- python中文叫什么意思-python中文读什么
- do while(false)
- 虚拟服务器设置upnp,TP-Link路由器如何设置UPNP开启【设置步骤】
- C# 执行Cmd窗口中的命令 [复制文件实例]
- OpenFileDialog 类的ShowDialog() 错误的解决
- java算法实验标尺问题_在codeigniter项目中使用标尺库
- 英雄会被表彰,这些技术与代码也将载入史册!
- 牛客练习赛20:D. 最短路2
- 电机功率与转矩/扭矩的关系
- 坐标求四面体体积_给定4个点坐标求四面体体积
- 华为asph是什么型号_华为triple camera这是什么型号
- 你沐浴后的味道,根本让人把持不住!留香24小时,比喷了大牌香水还迷人!...
- 一个执念重度患者的自白
- CAD绘制粗略的示坡线
- 关于页面请求发起后,通过F12查看到,被挂起页面中stalled花费很长时间问题的追查...
- 数学图形之单叶双曲面
- 考研英语十附双语阅读:按点下班惹非议?一点小花招让你看起来超努力(纯阅读,有些方法不普适)
- P2P想借壳上市?只能看命了
热门文章
- java保留两位小数4种方法,java保留两位小数4种方法,java两位小数4种
- svn 分支上新增文件合并发生冲突_SVN把分支合并到主干过程演示
- HTC国行获取Google服务框架方法-最简
- scrapy框架使用流程
- git命令删除本地分支和远程分支
- xgboost算法_第113天: Python XGBoost 算法项目实战
- JsRender基础语法循环和判断
- 用P5.js绘制一个看着鼠标的章鱼哥
- php+mysql用户管理系统毕业设计(源代码+毕业论文)
- java实现看门狗_Linux启动Jar脚本看门狗脚本