text-trans 屬性.ppt

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

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

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