转自:http://www.gbtags.com/gb/share/2388.htm
在一个二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y 轴之外,还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度,还有深度。我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论。
CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。
位移translate()函数
大家不要误会了,translate并不是指翻译外国语言,在这里translate是一种方法,将元素向指定的方向移动,类似于position中的relative。可以简单的理解为,使用translate()函数,你可以把元素从原来的位置移动,而不影响在X、Y轴上任何组件。
translate()函数的使用语法如下:
或者
translate()函数可以取一个值tx,也可以同时取两个值tx和ty,其取值具体说明如下:
- tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向X轴右方向移动,反之其值为负值时,元素向X轴左方向移动。
- ty是一个代表Y轴(纵向标)移动的向量长度,当其值为正值时,元素向Y轴下方向移动,反之其值为负值时,元素向Y轴上方向移动。如果ty没有显式设置时,相当于ty=0。
结合起来,translate()函数移动元素主要有以下三种移动:
- 水平移动:向右移动translate(tx,0)和向左移动translate(-tx,0);
- 垂直移动:向上移动translate(0,-ty)和向下移动translate(0,ty);
- 对角移动:右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。
现在我们来看一些有关于translate()函数的简单例子。我们使用transform:translate(tx,ty)将一个对象从其原始位置移动,其中tx值为正值和ty值等于0时,对像向右移动:
HTML
CSS
效果如下图所示:
在这个示例中,我们让扑克牌梅花King相对于原点中心位置向右移动100像素。如果仅需让元素向右移动,我们可以省略ty值。换句话说ty值为0时可以省略不写。如此一来,上面的效果等同与:
要将一个对象移动到左边,我们只需要输入一个负数的X轴坐标,而Y坐标应保持0,基于前面的实例,我们将扑克牌向左边移动100像素:
效果如下图所示:
垂直移动一个对象很简单,几乎和水平移动对象相同。唯一的区别是,我们将使用Y轴的值控制对象向上和向下移动位移量。正如我们前面提到的,Y轴的坐 标值为正值时,对像向下移动;反之其坐标值为负值时,对象向上移动。而X轴的坐标值应该保持为0。我们来看一个简单的实例,将一扑克牌向上,向下移动 100像素:
其效果如下图所示:
要让一个元素对角移动,我样将结合X轴和Y轴两坐标的值。根据不同的方向,X轴和Y轴的值可能是正值或是负值。如果我们要将一张扑克牌向右上角移 动,需要将X轴坐标设置为正值,将Y轴从标设置为负值;如果要将一张扑克牌向右下角移动,需要将X、Y轴坐标设置为正值;如果要将一张扑克牌向左上角移 动,需要将X、Y轴坐标设置为负值;如果要将扑克拍向左下角移动,需要将X坐标设置为负值,Y轴坐标设置为正值。
其效果如下所示:
如果我们要将对象沿着一个方向移动,比如说沿着水平轴或者纵轴移动,可以实使用translate(tx,0)和translate(0,ty)来实现。其实在变形中还为单独一个方向移动对象提供了更简单的方法:
- translateX():水平方向移动一个对象。通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点说,对像只向X轴进行移动,如果值为正值,对像向右移动;如果值为负值,对像向左移动。
- translateY():纵轴方向移动一个对象。通过给定一个Y轴方向的数值指定对象沿纵轴方向的位移。简单点说,对象只向Y轴进行移动,如果值为正值,对象向下移动;如果值为负值,对像向上移动。
这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。所以,transform:translate(-100px,0)实际上等于transform:translateX(-100px);transform:translate(0,-100px)实际上等于transform:translateY(-100px)。
缩放scale()函数
缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似,他可以接受一个值,也可以同时接受两个值,如果只有一个值时,其第二个值默认与第一个值相等。例如,scale(1,1)元素不会有任何变化,而scale(2,2)让元素沿X轴和Y轴放大两倍。其使用语法如下:
或者:
其取值简单说明如下:
- sx:用来指定横向坐标(X轴)方向的缩放向量,如果值为0.01~0.99之间,会让对象在X轴方向缩小,如果值大于或等于1.01,对象在Y轴方向放大。
- sy:用来指定纵向坐标(Y轴)方向的缩放量,如果值为0.01~0.99之间,会让对象在Y轴方向缩小,如果值大于或等于1.01,对象在Y轴方向放大。
这有一个简单的实例:
HTML
CSS
效果如下所示:
上面的例子将扑克牌放大了1.5倍或是实际尺寸的150%。因为我们同时对X和Y轴方向方大,所以我们只需要给scale()声明一个值。你也可以使用transform:scale(1.5,1.5)实现想相同的效果。
此外如果我们要缩小一个元素,我们会专门使用一个0~0.9999的值,像下面的例子,我们将扑克牌缩放一半,也就是实际尺寸的50%。
效果如下所示:
但是,要小心,如果你将值设置为“0”时,元素将会消失。我想,如果没必要,你是不会这样做的。当我们仅给scale() 函数只显式设置一个值时,会使对象成正比例放大或缩小。如果需要将对象在X轴和Y轴两个方向设置不同的值。
效果如下所示:
scale()函数和translate()函数极其相似,除了能通过scale()函数使用元素水平方向和垂直方向同时缩放(也就是元素沿X轴和Y轴同时缩放)之外,也可以使元素仅沿着X轴或Y轴方向缩放:
- scaleX():相当于scale(sx,1)。表示元素只在X轴(水平方向)缩放元素,其默认值是1。
- scaleY():相当于scale(1,sy)。表示元素只在Y轴(纵横方向)缩放元素,其默认值是1。
通过上面的介绍,让我们不由想起图形编辑软件中的缩放工具,对对象进行缩放效果。在CSS3中的scale()函数和图形编辑软件中的缩放工具几乎相同:
在scale()函数中,取值除了可以取正值之外,同时还可以取负值。只不过取负值时,会先让元素进行翻转,然后在进行缩放。
HTML
CSS
效果如下:
scale()函数对元素进行缩放时,都是以元素的中心为基点,但可以通过transform-origin来改变元素的基点。
旋转rotate()函数
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
rotate()函数的使用很简单,其基本语法如下:
rotate()函数只接受一个值,其属性值简单说明如下:
- a:代表的是一个旋转的角度值。其取值可以是正的,也可以是负的。如果取值为正值时,元素默认之下相对元素中心点顺时针旋转;如果取值为负值时,元素默认之下相对元素中心点逆时针旋转。
接下来,我们来看一个简单的例子,扑克牌相对于元素中心点顺时针旋转45度:
HTML
CSS
效果如下所示:
在默认之下,rotate()函数旋转元素是相对于元素中心点进行旋转,同样,我们可以通过transform-origin属性重置元素的旋转原点:
基于上例,修改旋转原点后的效果就完全不同了:
rotate()函数也同样可以和图形编辑软件中的旋转工具的功能对比起来理解。如下图所示的是CSS3中rotate()函数在2D中的旋转与Photoshop制作软件中旋转工具的对比:
倾斜skew()函数
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。语法格式如下:
或者
其属性值说明如下:
- ax:用来指定元素水平方向(X轴方向)倾斜的角度。
- ay:用来指定元素垂直方向(Y轴方向)倾斜的角度。如果未显式的设置这个值,其默认为0。
这里有一个简单的例子:
效果如下图所示:
倾斜skew()函数和CSS3中变形中的translate()、scale()函数一样,除了可以使用skew(tx,ty)函数让元素相于元素中心为原点在X轴和Y轴倾斜之外,还可以使用skewX()和skewY()函数让元素只在水平或垂直方向倾斜。
- skewX():相当于skew(ax,0)和skew(ax)。按给定的角度沿X轴指定一个倾斜变形。skewX()使元素以其中心为基点,并在水平方向(X轴)进行倾斜变形。
- skewY():相当于skew(0,ay)。按给定的角度沿Y轴指定一个倾斜变形。skewY()用来设置元素以其中心为基点并给定的角度在垂直方向(Y轴)倾斜变形。
在默认情况之下,skew()函数都是以元素的原中心点对元素进行倾斜变形,但是我们同样可以根据transform-origin属性,重新设置元素基点对元素进行倾斜变形。另外,skew()函数和制图软件中的变形工具所起作用类似。
矩阵matrix()函数
CSS3中Transform让我们操作变形变得很简单,诸如,位移translate()函数、缩放scale()函数、旋转rotate()函数和倾斜skew()函数。这几个函数很简单,也很方便,但是变形中的矩阵函数matrix()对于我们来说就不常使用了。
当然,Web设计师可以使用rotate()、skew()、scale()和translate()函数来满足他们的变形需要,那我们为什么要劳烦矩阵matrix()呢?在CSS3中的变形函数都可以使用matrix()函数来代替,例如:
使用矩阵可以实现一个复杂的2D变形,如下:
使用一个矩阵matrix()规则变成如下:
你也许很讨厌matrix()函数中的一大堆数字,但是要整明白CSS3变形中的matrix()函数,我们先要了解矩阵matrix是怎么一回事。接下来我们一起探讨一下transform中的matrix。
在CSS3中变形的matrix分为两种,一种是2D矩阵,另外一种是3D矩阵。我们就先从简单的入手——2D矩阵matrix。
CSS3中的2D矩阵matrix总共提供了六个参数:a,b,c,d,e和f,其基本写法如下:
matrix(a,b,c,d,e,f)
实际上,这六个参数,对应的矩阵就是:
在开始之前,首先来复习下一个简单的线性代数知识:矩阵与向量乘法。太复杂的我们用不到,我们只需要了解三维向量与3 x 3矩阵的乘积:
弄明白3x3的矩阵之后,即可知道matrix计算方法。x和y是元素初始原点的坐标,x’和y’则是通过矩阵变换后得到的新原点坐标。通过中间的 那个3x3的变换矩阵,对原先的坐标施加变换,就能得到新的坐标了。依据矩阵变换规则即可得到:x’=ax+cy+e和y’=bx+dy+f:
上面的一大堆的字母让你看了犯迷糊,为了让人更好的理解,我们一起来看一个简单的例子。假设矩阵参数如下:
transform: matrix(1,0,0,1,50,50);/*a=1,b=0,c=0,d=1,e=50,f=50*/
现在,我们根据这个矩阵偏移元素的中心点,假设是(0,0),即x=0,y=0。
我们可以按照上面介绍的矩阵方式,将这个列成矩阵:
于是,变换后的原点位置x’和y’可以根据矩阵向量的计算规则计算出来:
也就是计算得出x’=50,y’=50。即元素的原点由(0,0)移动到(50,50)的位置。实际上transform:matrix(1,0,0,1,50,50);就等同时transform: translate(50px,50px)。
HTML
CSS
效果如下所示:
通过一些篇幅介绍了矩阵的一些基础知识,并通过一个简单的实例用matrix()函数实现translate()的位移效果。接下来我们分别看看CSS3变形中matrix()和各变形函数之间的关系。
translate()转换成matrix()
首先来看最简单的位移translate()函数。我们都知道transform:translate(tx,ty)的基本含义是将一个元素的显示位置平移tx,ty。在矩阵变形中,translate的matrix的参数为:
其对应的矩阵图:
由此公式可知:transform:translate(100px,100px);即对应着transform:matrix(1,0,0,1,100,100);推算出的结果:x’=x+tx=x+100;y’=y+ty=y+100。
scale()转换成matrix()
transform:scale(sx,sy)将一个元素按指定的倍数进行缩放,它对应的矩阵是:
其对应的矩阵图:
由此公式可知:transform:scale(1.5,1.5);及对应着transform:matrix(1.5,0,01.5,0,0);推算出的结果:x’=x*sx=1.5*x;y’=y*sy=1.5*y。
rotate()转换成matrix()
transform:rotate(a)将一个元素按指定的角度旋转,它对应的矩阵是:
由此公式可知:transform:rotate(45deg);及对应着transform:matrix(0.53,0.85,-0.85,0.53,0,0);[sin(45’)=0.85,cos(45’)=0.53]。推算出来的结果:x’=cos(a) x – sin(a)*y=cos(45)*x – sin(45)*y;y’=sin(a)*x + cos(a)*y = sin(45)*x + cos(45)*y。
skew()转换成matrix()
transform:skew(ax,ay)将一个元素按指定的角度在X轴和Y轴倾斜,它对应的矩阵是:
其对应的矩阵图:
由此公式可知:transform:skew(45deg),对应着transform:matrix(1,0,1,1,0,0),其中tan(45’)=1。推算出来的结果:x’=x + tan(a)*y;y’=tan(a)*x + y。
上面演示的是CSS3中常见的变形与矩阵的关系,除了上面演示的之外,还有其他的一些。下图就是所有CSS3变换与矩阵等价的关系图:
matrix()实现镜像
在制图软件中变形工具除了旋转、倾斜、位移、缩放等还有镜向(水平镜向、垂直镜向):
但镜像对称在CSS3变形中没有相应的简化操作。只能通过矩阵matrix()来实现。通过前面的内容介绍,我们清楚的知道,元素变形的原点是其中 心点(在没有显式的重置之外),那么这个镜向的原点也不例外。因为该轴永远经过原点,因此,任意对称轴都可以用y=k*x直线表示。则matrix表示就 是:
这个如何得到的呢?我们来看看实现的过程。如下图所示,已经y=k*x,并且知道点(x,y),求其对称点(x’,y’)的坐标位置:
很简单,一是垂直,二是中心点在轴线上,因此有:
很简单的,把x’和y’提出来,就有:
再结合矩阵公式:
我们就可以得到:
也就是上面matrix矩阵中的参数值。
CSS3 2D Ttransform兼容性
CSS3的2D变形到目前为止在主流浏览器中得到较好的支持.CSS3的2D变换虽然得到众多主流浏览器的支持,但在实际使用的时候需要添加浏览器各自的私有属性:
- IE9中使用2D变形时,需要添加-ms-私有属性,在IE10+版本开始支持标准版本。
- Firefox3.5至Firefox15.0版本需要添加-moz-的私有属性,在Firefox16+版本开始支持标准版本。
- Chrome4.0+开始支持2D变形,在实际使用的时候需要添加-webkit-私有属性。
- Safari3.1+开始支持2D变形,在实际使用的时候需要添加-webkit-私有属性。
- Opera10.5+开始支持2D变形,在实际使用的时候需要添加-o-私有属性,但在Opera12.1版本不需要添加私有属性,不过在Opera15.0+版本需要添加私有属性-webkit-私有属性。
- 移动设备iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+需要添加私有属性-webkit-,而Opera Mobile11.0至Opera Mobile12.1和Firefox for Android19.0+不需要使用浏览器私有属性。
相关推荐
css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码
CSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 ...
纯css3 transform文字变形3D阴影效果代码 纯css3 transform文字变形3D阴影效果代码
1、认识渐变和浏览器兼容 2、线性渐变 3、径向渐变 4、重复渐变 5、CSS3过渡Transition的用法 6、CSS3 2D转换Transform(位移,缩放,旋转,倾斜)的应用
css3 transform 3D 图片旋转木马
div css3 hover transform属性5种鼠标悬停 div css3 hover transform属性5种鼠标悬停
利用transform属性写的圆盘导航
实现针对于Webkit(Google Chrome,Safari)、Moz(Firefox)以及Opera浏览器的一些变换效果,包括旋转、倾斜、缩放、位移效果。
css3 animation transform鱼游动特效</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, ...
纯css3 transform制作带指针偏移Safari指南针动
3D-css-transform.zip,css转换操场。可视化二维和三维css3转换功能的在线工具。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
10种纯CSS3 transform鼠标悬停到图片上过渡动画显示 10种纯CSS3 transform鼠标悬停到图片上过渡动画显示
里面是关于CSS3的一些特效,保存别人的网页,以及W3C中关于transitions transform animation的详细介绍。
css3 2D转换(transform) 位移(translate) 旋转(rotate) 转换中心点(transform-origin) 缩放(scale) 2D转换综合写法 正文 __start: 位移(translate) 语法 说明 transform:translate(x,y) 元素在x...
利用css3 transform属性制作的14种不同效果的侧边栏导航的隐藏和显示动画效果。该侧边栏导航可用于移动设备等小屏幕设备,效果极赞。
transform-style属性是3D空间一个重要属性,指定嵌套元素...也就是说,如果对一个元素设置了transform-style的值为flat,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导
css3 transform创意的机械Loading加载动画效果
这是一款基于css3 animation transform属性制作的鱼游动动画特效,用background-position属性实现两条游动追逐的鱼。
transform 2D之前有看到google将搜寻的页面倾斜,这个功能透过CSS3的transform就可以达成CSS3 2D transform特性可以旋转、倾斜、放大缩小和移动元素,对网页的视觉观感上提供很大的帮助使用方法: CSS Code复制内容...
纯css3 transform制作弹簧动画特效