热线:0532-83801234

2019-03-25

程序中关于Transform属性介绍

transform属性在网站建设中很常见的属性定义:可以实现旋转,缩放,移动等功能(可分x,y,z轴),语法:transform : none | <transform-function> [ <transform-function> ]* 也就是:transform: rotate | scale | skew | translate |matrix;

一、rotate(旋转)

rotate(<angle>) :能够旋转指定的元素对象,主要在二维空间内进行操作,接受一个角度参数值。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。语法:rotate(度数值)

二、translate(移动)

三、scale(缩放)

scale也具有三种情况:中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。具体使用方法:

1、scale(x,y)使元素水平方向和垂直方向均缩放:可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。

2、scaleX(x)元素仅水平方向缩放: scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,通过transform-origin来改变元素的基点。

3、scaleY(y)元素仅垂直方向缩放: scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点。

四、skew(扭曲)

skew和translate、scale一样同样具有三种情况:(X轴和Y轴同时按一定的角度值进行扭曲变形);(X轴扭曲变形);(Y轴扭曲变形),具体使用如下:

1、skew(x,y)使元素在水平和垂直方向均扭曲:第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg。同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。

2、skewX(x)仅使元素在水平方向扭曲变形: 按给定的角度沿X轴指定一个skew transformation(斜切变换)。skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变行,同样可以通过transform-origin来改变元素的基点。

3、skewY(y)仅使元素在垂直方向扭曲变形: 按给定的角度沿Y轴指定一个skew transformation(斜切变换)。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形。同样我们可以通过transform-origin来改变元素的基点。

五、matrix(矩阵)

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。

       东八区品牌创意(青岛)有限公司自成立之初本着为客户提供高端服务,实现客户最大价值为目标,为山东省内广大企事业单位提供了从网站建设、品牌策划到视频制作、活动策划等一站式互联多交互式服务。同时公司拥有强大的设计师团队和视频制作团队,曾经多次为山东省内知名企业设计产品画册、企业宣传片、广告片等,为企业提升企业形象,增加正能量的企业文化不遗余力。