Transform,顾名思义,是“变形”之意,它是CSS3中重要的动画属性之一,包含“旋转rotate”、“扭曲skew”、“缩放scale”、“移动translate”以及“矩阵变形matrix”5种变形方式。
基本语法:
transform : none | <transform-function>
none:表示不变形;
<transform-function>:表示一个或多个变换函数,指rotate 、 scale 、 skew 、translate 、matrix。Transform属性支持多种变换方式同时进行,不同变换方式需以空格隔开。元素默认基点就是其中心位置。
适用范围:
内联(inline)元素和块级(block)元素。
具体语法:
一、旋转(rotate)
rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需提前定义transform-origin属性,即定义旋转的基点,其中angle是指旋转角度,正数值表示顺时针旋转,负值表示逆时针旋转。如:transform:rotate(30deg)表示顺时针旋转30度。
二、移动(translate)
移动(translate)有三种方式:translate(x,y)水平垂直方向同时移动(也就是X轴和Y轴同时移动)、translateX(x)仅水平方向移动(X轴移动)、translateY(Y)仅垂直方向移动(Y轴移动),如transform:translate(100px,20px)等。移动的默认基点是元素的中心,可以通过transform-origin改变移动的元素基点。
三、缩放(scale)
缩放(scale)也有三种方式:scale(x,y)元素水平垂直方向同时缩放(也就是X轴和Y轴同时缩放)、scaleX(x)元素仅水平方向缩放(X轴缩放)、scaleY(y)元素仅垂直方向缩放(Y轴缩放)。取值大于1表示放大、取值小于1表示缩小,另外,基点改变方式同上。
四、扭曲(skew)
扭曲(skew)同样具有三种方式:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。如:transform:skew(30deg,10deg):
五、矩阵(matrix)
matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,这里不详细介绍。
附加说明:
改变元素基点transform-origin
transform-origin的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。transform-origin(X,Y)用来设置元素的运动的基点(参照点),默认点是元素的中心点。其中X和Y的值可以是百分值、em和px,其中X值可以是left、center、right;Y值也可以是top,、center、bottom。实际上,这个取值类似于background-position,对熟悉css2的人来说很好理解。
浏览器兼容性
css3transform浏览器兼容性图例
如上图所示,ie9以下版本不支持transform属性,对于已支持的浏览器,具体写法也不同,如下:
//Mozilla内核浏览器:firefox3.5+
-moz-transform-origin: x y;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform-origin: x y;
//Opera
-o-transform-origin: x y ;
//IE9
-ms-transform-origin: x y;
//W3C标准
transform-origin: x y ;
//Mozilla内核浏览器:firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
分享到:
相关推荐
CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d 其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 也就是说,如果对一个元素设置了transform-...
...
...
CSS3变形是一些效果的集合,比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D ...
主要为大家详细介绍了CSS3中Transform动画属性用法,教大家如何实现2D transform变换、3D transform变换,感兴趣的小伙伴们可以参考一下
主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下
transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; background-color: #ffffff; height: 226px; -webkit-box-shadow: 0 0 2em #5191f1; -moz-box-sh
CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
我刚刚接触transform的skew属性值时一头雾水,根本不知道种东西到底是咋变的。上网查,各个网站上也只说这个使用来做扭曲变换的,具体是咋变的就是不说。。。。无奈我只好自己研究了,现把研究结果共享一下。 首先...
css3 矩阵变化. 应用格式为: transform: matrix(a,b,c,d,e,f); 对应于就是: 实际应用中的转换就是: 其中: ax+cy+e = 横坐标 bx+dy+f = 纵坐标 为什么会多出 0 0 1呢? 因为, 为了凑参数. translate 矩阵 基本格式...
主要介绍了css3学习系列之移动属性详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说...值描述transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing
CSS3 transform 属性 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-transform ...
本文介绍的是css3的3d模块,对大家具有一定的参考价值,感兴趣的朋友们下面来一起看看吧。 介绍 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向。 不理解的话可以...
CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform,使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix,还有基于这些分支出的...