HTML5－36d嗨起^_^

时间：2022-08-29 15:06:56

如果一个前端不会写css那必然会被贻笑大方，利用html5新增的一些c3属性可以做许许多多炫酷的效果.

大家先看我写的一个小demo: http://zpf92.github.io/build/

这个demo里面运用了最重要的2个属性， 分别transform-style和perspective。

一、关于3d试图

transform-style: flat|preserve-3d;

flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d;只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样，三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型。列举几个函数：

1. translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写：

　　如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

2 .scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写：

　　如：scaleX(),scaleY(),scaleY()。

3. rotate3d(x,y,z,angle) 使元素在这三个纬度中旋转,也可以分开写：

　　如：rotateX(angle),rotateY(angle),rotateZ(angle)

这里我我也写了2个小demo方便大家操作与理解 　　

http://zpf92.github.io/build/rotate.html

http://zpf92.github.io/build/translate.html

二、透视/景深效果

perspective: number|none;

perspective为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当 perspective:none/0;时，相当于没有设perspective。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看 （立方体已经成了小正方形了）。当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置perspective(length)后， 将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的中点，也就是perspective- origin: 50% 50%。当然你也可以自己设置，比如：左上角-webkit-perspective-origin: 0px 0px；。

综合以上两点，我们可以通过几个实例，来深入了解下perspective(length); 和 transform-style:preserve-3d；

1. 当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：

　　　　　　　　　　HTML5－36d嗨起^_^

2. 当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：

　　　　　　　　　　HTML5－36d嗨起^_^

3. 当设置transform-style:preserve-3d；不设置perspective(length)；当元素静止时，不会有立体的效果

　　　　　　　　　　　　　　HTML5－36d嗨起^_^

4. 当设置transform-style:preserve-3d；不设置perspective(length)；当元素旋转时的效果：

　　　　　　　　　　HTML5－36d嗨起^_^

5. 只有当两个值都设置，不管是静止还是旋转，都会看到立体的效果。此外还要注意几点

　　1. 如果父元素设置overflow：hidden；那么子元素就无法跳出父元素的平面，也就不能出现3D效果。就如同，transform-style：flat；

　　2. 子元素是定位元素，参照物会寻找上层的定位元素，如果没有定位父元素则找最近的带有transform属性的元素。

随机推荐

  1. Dijkstra算法优先队列实现与Bellman&lowbar;Ford队列实现的理解

    /* Dijkstra算法用优先队列来实现,实现了每一条边最多遍历一次. 要知道,我们从队列头部找到的都是到 已经"建好树"的最短距离以及该节点编号, 并由该节点去更新 树根 到其 ...

  2. T-SQL：毕业生出门需知系列（五）

    第5课 高级数据过滤 5.1 组合 WHERE 子句 第4课介绍的 WHERE 子句在过滤数据时都是用单一的条件. 5.1.1 AND 操作符 检索由供应商 DLL01 制造且价格小于等于 4 美元的 ...

  3. 解决你的开发烦恼——Aoite 开源前奏

    Aoite(Any one item!) 一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案,敬请关注 Aoite GitHub. 介绍 本项目从2009年孵化(V-&g ...

  4. 能&quot&semi;干掉&quot&semi;苹果的中国&quot&semi;黑客&quot&semi;

    他是全球发现苹果漏洞最多的人,他曾穷的住在小黑屋,他经常接到国家安全部门的电话,他差点堵住周鸿祎的路,他是谁? 无名英雄 我们最终还是没有见到吴石本人,即便他的生意合伙人刘盛(化名)已经应承了帮我们牵 ...

  5. 在PowerDesigner中设计物理模型2——约束

    唯一约束 唯一约束与创建唯一索引基本上是一回事,因为在创建唯一约束的时候,系统会创建对应的一个唯一索引,通过唯一索引来实现约束.不过唯一约束更直观的表达了对应列的唯一性,使得对应索引的目的更加清晰,所 ...

  6. 深度学习算法实践15---堆叠去噪自动编码机（SdA）原理及实现

    我们讨论了去噪自动编码机(dA),并讨论了Theano框架实现的细节.在本节中,我们将讨论去噪自动编码机(dA)的主要应用,即组成堆叠自动编码机(SdA),我们将以MNIST手写字母识别为例,用堆叠自 ...

  7. pycharm 的安装及selenium环境的搭建

    6.呵呵哒,前面写了一篇pycharm的安装,,结果自己都看不懂了,copy了别人的,,,自己现在再写一遍,这篇文章主要写pycharm 的安装及selenium 环境的搭建,selenium的搭建不 ...

  8. TableView&plus;Button

    local MainScene = class("MainScene", cc.load("mvc").ViewBase) function MainScene ...

  9. Android的JSON数据解析

    一. 使用原生方式解析 准备工作:准备一个布局文件,用来显示元数据与转换之后的数据 <?xml version="1.0" encoding="utf-8&quot ...

  10. Linux 管理环境变量的文件分为系统级和用户级别

    Linux 管理环境变量的文件分为系统级和用户级别 管理环境变量的文件也分为系统级和用户级别: 1.系统级:/etc/profile:该文件是用户登录时,操作系统定制用户环境时使用的第一个文件,应用于 ...

相关文章