第98天:CSS3中transform变换详解

变换变换详解

本文主要介绍变形变换

变换字面上就是变形,改变的意思。在CSS3中变换主要包括以下几种:旋转旋转扭曲倾斜缩放尺度移动翻译以及矩阵变形。下面我们一起来看看CSS3中变的旋转旋转,扭曲倾斜,缩放规模和移动翻译具体如何实现,老样子,我们就从变换的语法开始吧。

语法:

 transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
   transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换; <transform-function>表示一个或多个变换函数,以空格分开; 换句话说就是我们同时对一个元素进行变换的多种属性操作,例如旋转缩放翻译三种,但这里需要提醒大家的,我们以往叠加效果都是用逗号(“”)隔开,但变换使用中多个属性时却需要有空格隔开。大家记住了是空格隔开。

取值:

变换属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素块级(块)元素。它允许我们旋转,缩放和移动元素,他有几个属性值参数:rotate;翻译;缩放;倾斜;矩阵。下面我们分别来介绍这几个属性值参数的具体使用方法:

一,旋转旋转

rotate(<angle>):通过指定的角度参数对原元素指定一个2D旋转(2D旋转),需先有变换原点属性的定义.transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg)

二,移动翻译

移动平移我们分为三种情况:翻译(X,Y)水平方向状语从句:垂直方向同时移动(也就是X轴和ý轴同时移动); 平移X(x)的水平方向移动(X轴移动); 平移Y( Y)垂直方向移动(Y轴移动),具体使用方法如下:

1,translate<translation-value> [,<translation-value>]:通过矢量[tx,ty]指定一个2D翻译tx是第一个过渡值参数,ty是第二个过渡值参数选项。如果未被提供,则ty0作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

2,translateX<translation-value>):通过给定一个X方向上的数目指定一个翻译。只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置。如:transform:translateX(100px):

3,translateY<translation-value>:通过给定Y方向的数目指定一个翻译。只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置。如:transform:translateY( 20像素):

三,缩放规模

缩放量和移动翻译是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放); scaleX(x)元素仅水平方向缩放(X轴缩放); scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置缩放基数为1,如果其值大于1元素就放大,反之其值小于1,缩小元素下面我们具体来看看这三种情况具体使用方法:

1,scale<number> [,<number>]:提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值量表(X,Y)是用于对元素进行缩放,可以通过变换原点对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,ÿ表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2, 1.5)

2,scaleX<number>):使用[sx,1]缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1 ),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点。如:transform:scaleX(2):

3,scaleY<number>:使用[1,sy]缩放矢量执行缩放操作,sy为所需参数.scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过变换原点来改变元素的基点如。变换:的scaleY(2):

四,扭曲歪斜

扭曲歪斜平移标度一样同样具有三种情况:歪斜(X,Y)使元素在水平和垂直方向同时扭曲(X轴和ý轴同时按一定的角度值进行扭曲变形); 如果skewX(x)的仅使元素在水平方向扭曲变形(X轴扭曲变形); skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具体使用如下:

1skew<angle> [,<angle>]:X轴Y轴上的偏斜变换(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是ÿ轴方向上无斜切.skew是用来对元素进行扭曲变行,一个第参数的英文水平方向扭曲角度,个第二参数的英文垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg。同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。如:transform:skew (30度,10deg):

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

3,skewY<angle>:按给定的角度沿Y轴指定一个偏斜变换(斜切变换) .skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形同样我们可以通过变换原点来改变元素的基点如:。变换:skewY(10deg)

五,矩阵矩阵

matrix<number><number><number><number><number><number>:以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[ABCDEF]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中,我在这里只是简单的说一下CSS3中的变换有这么一个属性值,如果有感兴趣的朋友可以去了解更深martix使用方法,这里就不多说了。

 

 

 


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值