text-trans 屬性.ppt

1、text-transform 屬性,一、在CSS1中，控制英文及拼音大小寫； 二、在CSS3中，用Transform功能可以實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實(shí)現(xiàn)。,一、在CSS1中，控制英文及拼音大小寫；,二、在CSS3中，用Transform功能可以實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四種類型的變形,在CSS3中，用Transform功能可以實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實(shí)

2、現(xiàn)。將這四種變形結(jié)合使用，就會(huì)產(chǎn)生不同的效果，使用順序不同，產(chǎn)生的效果是不一樣的。 目前瀏覽器支持情況：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ 一、旋轉(zhuǎn)： CSS中使用rotate方法來實(shí)現(xiàn)對(duì)元素的旋轉(zhuǎn)，在參數(shù)中加入角度值，旋轉(zhuǎn)方式為順時(shí)針旋轉(zhuǎn)。,注意：skew方法中的兩個(gè)參數(shù)可以修改成只使用一個(gè)參數(shù)，省略另一個(gè)參數(shù)，這可不是說水平方向和垂直方向一樣，這種情況視為只在水平方向傾斜，垂直方向上不傾斜。,注意：translate方法中的兩個(gè)參數(shù)也可以修改成只使用一個(gè)參數(shù)，跟skew方法類似，省略另一個(gè)參數(shù)，這種情況視為只在水平方向移動(dòng)，垂直

3、方向上不移動(dòng)。,下面把上面代碼中幾個(gè)變形方法的順序調(diào)整一下，先旋轉(zhuǎn)(順時(shí)針旋轉(zhuǎn)45度)，然后縮放(放大1.5倍)，移動(dòng)(向右移動(dòng)150px，向下移動(dòng)200px), 看看結(jié)果怎樣：,通過上面兩個(gè)示例可以看出，元素在兩個(gè)頁(yè)面上所處位置并不相同，為什么會(huì)這樣呢？先看第一個(gè)例子：首先向右移動(dòng)150px，向下移動(dòng)200px，元素的中心點(diǎn)在水平方向先移動(dòng)150px，再在垂直方向向下移動(dòng)200px，然后在旋轉(zhuǎn)45度，放大1.5倍。第二個(gè)例子：首先旋轉(zhuǎn)45度，并且放大了1.5倍，這時(shí)候元素是傾斜了45度角的，在移動(dòng)的話，元素就是按45度角的方向向右移動(dòng)150px，向下移動(dòng)200px是沿著與水平方向呈225度方向移動(dòng)的。看下下面的示意圖就很明顯了：,指定變形的基準(zhǔn)點(diǎn)：使用transform方法進(jìn)行文字或圖像變形的時(shí)候，是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行的。使用transform-origin屬性，可以改變變形的基準(zhǔn)點(diǎn)。,例六：兩個(gè)div元素，首先不改變變形的基準(zhǔn)點(diǎn)，將第二個(gè)div元素進(jìn)行旋轉(zhuǎn)。,下面使用transform-origin屬性把變形的基準(zhǔn)點(diǎn)修改為第二個(gè)元素的左下角，代碼如下：,指定transform-origin屬性值的時(shí)候，采用“基準(zhǔn)點(diǎn)在元素水平方向上的位置，基準(zhǔn)點(diǎn)在元素垂直方向上的位置”的方法，其中“基準(zhǔn)點(diǎn)在元素水平方向上的位置”中可以指定的值為left、cen