本篇文章主要用来归纳总结CSS3变形属性。

CSS3变形属性大致可以分为以下三个部分:

  1. 变形控制属性
  2. 2D变形函数
  3. 3D变形函数

下面将对其一一进行分析:

1.变形控制属性

所谓的变形控制属性主要指“不直接作用元素变形,但影响元素变形函数函数或元素最终视觉效果的属性”。主要有以下四个:

  • transform-origin属性
  • transform-style属性
  • perspective属性
  • backface-visibility属性

下面逐一分析这四个属性。

(1)transform-origin属性

transform-origin属性用于指定元素中心点的位置。由于在默认情况下,元素变形的原点为元素的中心点,因此改变中心点的位置,元素变形所得到的最终效果也会大不相同。同时值得一提的是,通常在元素定位时,以元素左上角为坐标原点进行定位,在这种情况下,元素的位置实际上与元素的大小无关(我们只需考虑元素位置的偏移量)。而变形以元素中心点为原点的这一特性则使元素定位增加了另一种情况,即在定位需考虑到元素自身大小时,通过相对自身位置进行定位。这种“相对定位”,位移有了一个新的尺度,元素自身的宽高。

transform-origin属性接受关键字百分比数长度单位值三种类型的参数,使用方式如下:

 transform-origin : 50% 50%;
transform-origin : top center;

实际上,通过在每一次元素变形前指定元素变形的中心点位置,可以极大的丰富元素变形效果。

(2)transform-style属性

transform-style属性用于为元素创建一个2d或3d的显示环境,即transform-style的两个属性flatpreserve-3d像一个开关一样,控制着元素的空间展示效果,在flat模式下,元素的3d变形都无法展现出立体效果。

(3)perspective属性

这个属性讲解起来略微有些复杂,它实际上向浏览器声明了"观看者"与z轴原点的距离,我们知道“近大远小”的道理,两个物品一前一后相差5米的排列,站在近处和站在远处所感受到的距离感是截然不同的,在2d平面要展示3d空间的效果,画家们发明了'透视法',而我们则需要借此设置一个"透视值"即告诉浏览器你此刻需要的透视效果有多强(即景深有多明显)。说清这回事又是一个稍微复杂的事,直接上图吧:

这里是两张perspective值为1000px/600px,z轴偏移-200px的效果图。

这里是两张perspective值为1000px/600px,z轴偏移200px的效果图。

这下一目了然了的是,可以看出perspective这个属性值设置的越小,则z轴的偏移程度就越明显。

值得一提的是,在容器中使用perspective属性,会自动开启transform-style:preserve-3d声明,实在是十分方便。

perspective属性取值只能为长度值或none,但不支持百分比。

你以为这就结束了?并没有,与perspective相关的还有以下两个属性:

perspective()函数与perspective-origin属性。

下面简单提一下:perspective()函数在功能上类似于perspective属性,但是在以下几个方面有明显不同:

① 使用时机:perspective()函数需使用在变形函数transform属性内,perspective属性需放入变性元素父元素中独立使用;

②参数/值不同:perspective()函数知道能使用大于0的值,而perspective属性可取任意长度值;

③使用目的:perspective()函数用于针对变形元素自身调整视距,而perspective属性针对父元素3d环境调整整体视距;

④是否自动开启3D环境:否,是。

接着是perspective-origin属性,决定了视点的位置,默认为50%,50%。该属性必须在3d环境盒子上并配合perspective属性一同使用。

(4)backface-visibility属性

当我们知道元素可以沿着Y轴旋转180度时,是否好奇元素的背面是什么?做个小实验就可以知道,元素盒子好比一张透明的幻灯片,翻转180度后,字体会倒转显示。因此如果我们不希望看到元素的背面,这里提供了一个属性来做到这点。

backface-visibility属性只有两个值:visible(默认)和hidden。分别控制着元素的背面是否可见,有意思的是,当其值设置为hidden时,元素翻转180度后实际上整体都被隐藏起来了。

2.2D变形函数

元素在2D空间内的变形,主要涉及以下三个方面:位置(位移和旋转)大小倾斜

下面一一介绍对应的变形函数:

(1)改变元素的位置(2d)

(1.1)改变元素的绝对位置  translate(tx,ty)

很容以理解,为选中元素加上"transform:translate(0,100px)"的声明,即可将元素向下平移100个像素的位置。

需要特别说明的是,对于网页中的元素而言,坐标轴的设置和我们平时数学中使用的坐标轴是不同的,网页中使用的坐标轴方向如下图:

是以“右边”为x轴为正方向,以“下边”为y轴的正方向的。

因此,translate函数的两个参数分别设定了元素向右方与下方位移的偏移量。从效果上来看,这个函数略像"position:relative"的声明,但是不同之处在于,元素利用函数位移时默认以元素中心点为移动起始点,因此对于需要参照元素自身尺寸移动的场合而言,特别有用。

位移函数接受参数的单位有:px,em,%。

另外,为了方便起见,这个函数还提供了对x轴和y轴位移的具体控制:translateX(),translateY()。

(1.2)改变元素的相对位置   rotate(a)

旋转是改变元素相对位置的函数,只接受一个值,即旋转的角度值,其值可正可负。正值为沿中心顺时针旋转,因为较为简单,再次不再赘述。

(2)改变元素的大小(2d)  scale(sx,sy)

缩放函数可以让元素根据中心圆点进行放大或缩小,默认值为1。因此任何0.01到0.99的值会使元素缩小,任何大于1.01的值都会使元素放大。

像位移函数一样,缩放函数接收的两个参数分别控制着x轴方向,与y轴方向的放大/缩小倍数,如果只给scale函数一个参数,则另一个参数的值会默认与第一个参数的值相等。

有意思的是,scale函数的参数还可以接受负值,当接受到负值时,元素会先进行翻转,在进行相应的放大或缩小。翻转的效果就像是将元素沿中心旋转180度一样。

同样的,缩放函数还提供了对x轴和y轴缩放的具体控制:scaleX(),scaleY()。

(3) 改变元素的形状(2d)  skew(ax,ay)

css3中对元素形状的改变由倾斜函数来实现,其参数的效果也是一般最令人迷惑的部分,在这里将详细讲解一下:

skew函数接受一个或两个参数值,如果未显式设置某个值,则其值默认为0。函数参数值的单位为角度(deg),第一个值表示将元素以中心为原点,在x轴倾斜多少角度,第二个值可以此类推。

比较让人难以理解的地方在于对倾斜效果的困惑,不明白如何通过参数值控制元素的变形。但实际上这是一个数学上的问题,下面这张图可以帮助很好的理解这一函数:

图上可以看到这里浅灰色的元素是设置了skew(30deg)后的效果,深灰色的部分则是元素原来的形状。根据定义,第一个参数值意味着将元素沿中点向x轴偏移的角度。即y轴向x轴偏移30度,这里需要再次提及网页中坐标系与数学中的不同,因此图像x轴方向的边长度保持不变,y轴方向的边向左倾斜了30度。

搞清楚原理之后,就可以进行如下的简单记忆了:函数参数的x值使y轴方向倾斜,正值使边逆时针倾斜,负值使边顺时针倾斜。

至此,skew函数就讲解清楚了,额外一提的是skew函数也有只针对x轴和y轴写法:skewX(),skewY()。

最后需要注意的是,css3中2d变形函数IE8及以下不兼容,并且IE9使用时需要添加-ms-私有属性,Chrome和Safari需要添加-webkit-私有属性(?)。

3.3D变形函数

相较于2D空间,元素在3D空间多出了深度这一位置属性,并在css中用z轴表示出来因此相较于2D变形函数而言,最需要注意的便是深度属性出现后,给元素变形带来的改变,由于其声明在原理效果上都与2D环境下无太大分别,因此在这里也不做格外的说明。

除此之外,还需要特别留意的是,如果要使用3D变形函数,一定要确保目标元素的父级元素设置了transform-style: preserve-3d这一属性,并且设置了合适的perspective值,否则在元素上设置的关于深度的属性是无法显示应有的效果的。下面我们具体谈谈css3的3D变形函数:

关于3D变形的浏览器支持如下:IE10+中的3D变形部分属性未得到很好的支持,chrome,safari和opera使用时需要添加私有属性-webkit-。

重新想,重新看——CSS3变形,过渡与动画②的更多相关文章

  1. 重新想,重新看——CSS3变形,过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  2. 重新想,重新看——CSS3变形,过渡与动画④

    最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...

  3. 重新想,重新看——CSS3变形,过渡与动画③

    这一篇主要谈谈CSS3的过渡属性. 过渡属性被设计的十分通俗易懂,属性写法为transition,有四个子属性: <transition-property> 表示需要过渡的属性[必须](本 ...

  4. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  5. 前端:css3的过渡与动画

    一.css3过渡知识 (一).概述 1.CSS3过渡是元素从一种样式逐渐改变为另一种的效果.      2.实现过渡效果的两个要件:    规定把效果添加到那个css属性上.    规定效果时长 定义 ...

  6. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  7. css3的过渡和动画的属性介绍

    一.过渡 什么是过渡? 过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果. 设置能够过渡的属性: 支持过渡的样式属性,颜色的属性,取值为数值,transfo ...

  8. CSS3 变形记

    CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...

  9. 常用到用css3实现的转换,过渡和动画

    为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

随机推荐

  1. js 连等赋值 分析

    JavaScript权威指南-第6版 4.11 赋值表达式 提到了连等赋值的情况,但是解释的不够详细,所以在此总结下: 首先看书上最重要的一句话: 这句话总结下就是: A = B ; // 整个表达式 ...

  2. 160301、js倒计时,页面上显示时间

    js: //倒计时 var countdown=60,t; function settime(){ if (countdown == 0) { $("#validateBtn"). ...

  3. 用于把List<Object>转换成Map<String,Object>形式

    /** * 用于把List<Object>转换成Map<String,Object>形式,便于存入缓存 * @author zhang_bo * @param keyName ...

  4. null array mysqli_fetch_assoc ( mysqli_result $result ) void mysqli_free_result ( mysqli_result $result )

    w取最大db_id. if($row=null){ var_dump(123); } var_dump($row); if($rowb=array('ww','w123')){ var_dump(23 ...

  5. (转)聊聊Servlet、Struts1、Struts2以及SpringMvc中的线程安全

    前言 很多初学者,甚至是工作1-3年的小伙伴们都可能弄不明白?servlet Struts1 Struts2 springmvc 哪些是单例,哪些是多例,哪些是线程安全? 在谈这个话题之前,我们先了解 ...

  6. 原型模式(Prototype Pattern)--对象的克隆

    定义:使用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象; 原型类的核心在于如何实现克隆方法: 能够实现克隆的Java类必须实现一个标识接口Cloneable,表示这个类支持被复制; 通 ...

  7. 【opencv】projectPoints 三维点到二维点 重投影误差计算

    今天计算rt计算误差——重投影误差 用solvepnp或sovlepnpRansac,输入3d点.2d点.相机内参.相机畸变,输出r.t之后 用projectPoints,输入3d点.相机内参.相机畸 ...

  8. Bad Hair Day---poj3250(栈的运用)

    题目链接:http://poj.org/problem?id=3250 题意: n个牛排成一列向右看,牛i能看到牛j的头顶,当且仅当牛j在牛i的右边并且牛i与牛j之间的所有牛均比牛i矮. 设牛i能看到 ...

  9. SSM框架关于后台返回JSON数据中显示很多不需要的字段为NULL

    xml 配置 spring mvc 的 json 返回忽略 null 字段 <mvc:annotation-driven> <mvc:message-converters regis ...

  10. xadmin快速搭建一个后台管理系统

    环境:python3.5.2 ,django 2.0 ,xadmin2.0 Firsttly, 到 https://github.com/sshwsfc/xadmin/tree/django2上下载源 ...