【CSS】770- 多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术;纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码,但对于一个程序员来说,真正理解其为什么会动起来的原理是非常重要的。下面让我来一步一步的带你理解网页中相互嵌套的3D动画是如何实现的!
假设我们在一个门框内有一扇门:
HTML代码非常简单:
<div class='container'> <div class='frame'> <div class='door'></div> </div></div>
为了打开这扇门,我们给它添加一个door--opencss类:
<div class='container'> <div class='frame'> <div class='door door--open'></div> </div></div>
现在,我们对它使用3D变换技术(通过对它的左侧应用transform-origin)属性:
.door--open { transform-origin: 0 0 /*whatever y value you wish*/; transform: rotateY(-45deg);}
对于使用CSS 3D变换,你唯一需要添加的CSS前缀可能只有-webkit-。IE9是完全不支持的,但IE10+是不需要使用前缀的。Opera 12及其之前版本完全不支持CSS变换技术,之后的版本在使用-webkit-前缀后是支持的。火狐浏览器从V16版(2012年)起不需要使用前缀。
效果:
现在的效果看起来并不是很真实。更真实实现这种效果的CSS属性叫做perspective(透视),它会让东西看起来近处的大,远处的小。
perspective属性必须应用到需要做3D变换的元素的父元素上。在WebKit浏览器里,只要是它的祖先元素都行,但在火狐或IE里只能是父元素。
现在我们要往门框元素上添加一个frame--realistic类:
<div class='container'> <div class='frame frame--realistic'> <div class='door door--open'></div> </div></div>
现在我们在其上设置perspective透视属性。透视属性的值约小,它就会显得离你的眼睛越近,这样,越近的东西会显得越大,越远的越小。
.frame--realistic { perspective: 20em;}
我们就得到了下面的效果:
这样看起来就好多了!但我们可以做得更好!比如,我们可以让这扇门动起来,并且具有3D效果。我们只需要在HTML和CSS里将door-open类换成door--ani类:
.door--ani { transform-origin: 0 0; animation: doorani 1.3s ease-in-out infinite alternate;}@keyframes doorani { from { transform: rotateY(-43deg); } to { transform: rotateY(43deg); }}
效果:
现在,我们还想让这扇门的门框也以3D的形式动起来。这很简单,不是吗?只需要在门框上添加一个frame--ani类,设定一个动画动作,将perspective透视属性移动到它的父元素上:
HTML代码变成了这样:
<div class='container container--realistic'> <div class='frame frame--ani'> <div class='door door--ani'></div> </div></div>
我们还需要添加下面的CSS代码:
.container--realistic { perspective: 20em;}.frame--ani { animation: frameani 2s ease-in-out infinite alternate;}@keyframes frameani { from { transform: rotateY(-30deg); } to { transform: rotateY(30deg); }}
可是,我们得到的效果却是:
看起来有些怪。看起来门的动画效果被门框的摆动抵消了。的确,事情就是这样,因为transform-style属性(用来告诉浏览器一个具有3D变换属性的子元素是否附随父元素的3D变换属性)的缺省值是flat。
这个问题可以通过将其父元素设置transform-style: preserve-3d来纠正。这样,我们就可以看到更自然的效果了:
但是,IE10/11只支持transform-style的flat值。有时我们会利用这种技术将父元素和子元素通过3D变换串联起来。
例如,我有一个稍微倾斜的立方体(没有顶部和底部面)。HTML代码是:
<div class='container container--realistic'> <div class='cube'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div></div>
相关的CSS:
.cube { position: relative; width: 5em; height: 5em; transform-style: preserve-3d; transform: rotateY(30deg) rotateX(10deg);}.face { position: absolute; width: 100%; height: 100%;}.face:nth-child(1) { transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */);}.face:nth-child(2) { transform: rotateY( 90deg) translateZ(2.5em);}.face:nth-child(3) { transform: rotateY(180deg) translateZ(2.5em);}.face:nth-child(4) { transform: rotateY(270deg) translateZ(2.5em);}
使用这些代码(这里有更详细的解释),我们得到了下面的效果:
如果你使用的是IE,我们需要在对每个面实施3D变换前先清空变换属性(如果这个立方体的父类也有变换特征,也需要先清空。)。我将立方体的父元素也处理了,就像下面:
.cube--ie { perspective: 20em; transform: none;}.face--ie:nth-child(1) { transform: rotateY(30deg) rotateX(10deg) translateZ(2.5em);}.face--ie:nth-child(2) { transform: rotateY(30deg) rotateX(10deg) rotateY( 90deg) translateZ(2.5em);}.face--ie:nth-child(3) { transform: rotateY(30deg) rotateX(10deg) rotateY(180deg) translateZ(2.5em);}.face--ie:nth-child(4) { transform: rotateY(30deg) rotateX(10deg) rotateY(270deg) translateZ(2.5em);}
于是,在IE里也得到了同样的效果:
虽然不是很方便,但也不是很糟。代码不是很多,也不是很乱…然而,当我们想旋转这个立方体时却出现了问题。我们需要使用transform-style: preserve-3d属性,我们简单的增加了一个cube--ani类,这段CSS代码是:
.cube--ani { animation: rot 4s linear infinite;}@keyframes rot { to { transform: rotateY(-330deg) rotateX(370deg); }}
可是,对于IE10/11来说,我们无法对立方体自身施加3D变换,我们只能对每个面单独实施3D变换。这就是说,我们要对所有的面设置变换属性。这就是说….每个面都要!
.cube--ie { animation: none;}.cube--ani .face--ie:nth-child(1) { animation: rot1 4s linear infinite;}@keyframes rot1 { to { transform: rotateY(-330deg) rotateX(370deg) translateZ(2.5em); }}.cube--ani .face--ie:nth-child(2) { animation: rot2 4s linear infinite;}@keyframes rot2 { to { transform: rotateY(-330deg) rotateX(370deg) rotateY(90deg) translateZ(2.5em); }}.cube--ani .face--ie:nth-child(3) { animation: rot3 4s linear infinite;}@keyframes rot3 { to { transform: rotateY(-330deg) rotateX(370deg) rotateY(180deg) translateZ(2.5em); }}.cube--ani .face--ie:nth-child(4) { animation: rot4 4s linear infinite;}@keyframes rot4 { to { transform: rotateY(-330deg) rotateX(370deg) rotateY(270deg) translateZ(2.5em); }}
这一大片,就是为了实现这个效果:
如果这么多的代码只是为了这4个面,那当需要面对100多个面时,你能想象是多恐怖的一堆代码吗?
你也许会想到上面的门也有这种问题,门的父元素有高度和宽度,是可见。如何在IE里实现?唯一能让门和门框在IE里一起动起来的方案就是修改HTML代码,让门和门框变成兄弟元素,单独对它们施加动画效果。
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4. 正则 / 框架 / 算法等 重温系列(16篇全)
5. Webpack4 入门(上)|| Webpack4 入门(下)
6. MobX 入门(上) || MobX 入门(下)
7. 80+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 80+ 篇原创文章
【CSS】770- 多层嵌套的CSS 3D动画技术详解相关推荐
- 多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
- 拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- Flutter 实现 3D 动画效果详解
前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上 ...
- html页面的盒子边框怎么做的,HTML+CSS入门 用三层盒子结构实现多边框详解
本篇教程介绍了HTML+CSS入门 用三层盒子结构实现多边框详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 如果想给每个盒子加上美观的border,实现如下效果 如果 ...
- 计算机动画技术的应用领域,3D动画技术的应用领域
随着计算机三维影像技术的不断发展,CG动画技术越来越被人们所重视.因其比平面图更直观,更能给受众以身临其境的感觉,尤其适用于那些尚未实现或准备实施的项目,使观者提前领略实施后的精彩结果.三维动画,从简 ...
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
- CSS 浮动布局放弃float,拥抱flex(详解)
CSS 浮动布局放弃float,拥抱flex(详解) 文章目录 CSS 浮动布局放弃float,拥抱flex(详解) 说明 Flex布局 容器和项目 容器属性 flex-direction属性 fle ...
- CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
最新文章
- DWZ基于ajax重复请求的修复
- 手把手实现火爆全网的视频特效 “蚂蚁呀嘿”,太魔性了
- ip通信基础第九周(下)
- 记录mysql客户端所有的操作
- 3-Qt6命令行输出显示
- 怎么禁止实例化对象---2016-08-31
- php遍历删除目录下文件,PHP遍历删除文件夹已经文件内的所有文件
- 美团笔试最大矩形面积
- WSS3.0自带数据库可以使用SQL 2005 Server Management Studio来管理
- 大工17秋《计算机文化基础》在线测试1,大工17秋《组织行为学》在线测试1答案...
- 如何找到JavaScript中的调用者函数?
- 32、把数组排成最小的数
- Python 中的map和reduce学习笔记
- python数据增强代码_基于Python的图像数据增强Data Augmentation解析
- Codeforces Round #388 (Div. 2) C. Voting
- java技术体系基础
- 怎么删除win10系统的AdobeFlash
- 《编程之道》(转载) 全文
- 2021-07-16 转载 - UmiJS应用框架
- 怎么能跳过苹果服务器降级系统,苹果ios11手机怎样将系统降级?简单三步即可完成降级!...
热门文章
- 有哪些句子,曾让你产生「我一辈子都写不出来」的想法?
- 电力监控系统在智能建筑电气节能中的应用
- 2021-09-142021年茶艺师(中级)考试题库及茶艺师(中级)考试试卷
- Java开发真的这么赚钱?连做金融的忍不住转行了
- Oracle日记账如何设置审核,手工日记账操作规范及常见问题分析
- 主题:程序的扩展性(BPL+DLL)
- IC验证培训——实战SV验证学习(lab5)
- DM常用查询SQL命令--系统信息篇
- tensorflow streaming_recall@kprecision@k与sklearn的区别
- luogu P3398 仓鼠找sugar