transform 字面上是:变换;改变使…变形;转换的意思。
三种但这里需要提醒大家的,以往我们叠加效果都是用逗号(“”)隔开,但 transform
中使用多个属性时却需要有空格隔开
下面我们分别来介绍这几个属性值参数的具体使用方法:
scale() 缩放函数 取值 正数、负数和小数
通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin
属性的定义
transform-origin 定义的是旋转的基点,其中angle
是指旋转角度如果设置的值为正数表示顺时针旋转,如果设置的值为负数则表示逆时针旋转。
具体效果如下(或点击这里):
当参数值x,y为负数时反方向移动物体,它们基点默认为元素中心点也可以根据transform-origin进行改变基點。
缩放scale
和位移translate
是极其相似它也有三种情况:
具体效果如下(或点击这里):
它们具有相同的缩放中心点和基数,其中心点就是元素的Φ心位置缩放基数为1,如果其值大于1元素就放大反之其值小于1,元素缩小
如果scale(x,y)没有设置Y值,则表示XY两个方向的缩放倍数是一样的,並以X为准。
具体效果如下(或点击这里):
同样它们是以元素中心为基点我们也可以通过transform-origin
来改变元素的基点位置。
matrix()
方法是一种简写形式有六个参数,包含旋转缩放,移动(平移)和倾斜的功能
它以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变換矩阵也就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,这里就不多说了
前面我们多次提到transform-origin
这个东东,它的主要作用就是让我们在进行transform
动作之前可以改变元素的基点位置因为元素默认基点就是其中心位置。下面我们主要来看看其使用规则:
定义视图被置于 X 轴的何处可能的值: |
定义视图被置于 Y 轴的何处。可能的值: |
bottom是垂直方向的取值其中top=0%;center=50%;bottom=100%;
如果只取一个值,表示垂直方向值不变我们分别来看看以下几个实例(或点击这里):
同样的transform在IE9下版本是无法兼容的,下面表格中的数字表示支持该属性的第一个浏览器版本号
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
1、css3 同时实现旋转和缩放(放大或缩小)
2、CSS3 实现位移并苴带有放大或缩小的效果
3、css3 旋转后发生位移