在css3中可以利用transform功能來實現文字影象的旋轉、縮放、傾斜、移動這四種型別的變形處理
相容性:
瀏覽器safari
chrome 8+
firefox 4+
opera 10+
各個瀏覽器寫法
示例文字div>css:
div
解析:rotate(45deg)
含義:rotate是旋轉,45deg是旋轉角度;旋轉方向為順時針;
使用scale方法來實現文字或影象的縮放處理,在引數中指定縮放倍率,例如:scale(0.5)表示縮小50%;
html:
示例文字div>css:
div
解析:
圖一是原圖,沒有任何縮放;
圖二是縮小50%;
圖三是x軸縮小50%,y軸放大2倍;即:-webkit-transform: scale(0.5,2);
使用skew方法來實現文字或影象的傾斜處理,在引數中分別指定水平方向傾斜角度、垂直方向傾斜角度,例如:skew(30deg,40deg)表示水平方向傾斜30度,垂直方向傾斜40度;
示例文字div>css:
div
解析:如果skew():中引數只寫乙個,代表只在水平方向上進行傾斜,垂直方向上不傾斜;如圖二;
使用translate方法來實現文字或影象的移動處理,在引數中分別指定水平方向移動距離、垂直方向移動距離,例如:translate(50px,50px)表示水平方向移動50px,垂直方向移動50px;
css:
div
在使用transform方法進行文字或影象的變形時,是以元素的中心點為基準點進行的。使用transform-origin
屬性,可以改變變形的基準點。
第一張圖不修改基準點的css:
div
div.a
div.b
第二張修改基準點的css:
div
div.a
div.b
解析:
transform-origin引數分別是:基準點在水平方向上的位置(left、center、right)、基準點在垂直方向上的位置(top、center、bottom);
其中 水平方向上的位置中可取值為:left、center、right;
垂直方向上的位置中可取值為:top、center、bottom;
CSS3變形效果
css3提供了元素變形效果,也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...
css3變形講解
transform變形 可以實現文字或者旋轉 縮放 傾斜和移動,並且該元素下的所有子元素都隨著父元素一樣。既然接觸到transform,我們就可以做好多3d的效果啦 旋 transform rotate 角度deg deg是css3的 values and units 模組中定義的乙個角度單位 縮放...
CSS3中的變形處理 transform 屬性
在css3中,可以利用transform功能來實現文字或影象的旋轉 扭曲 縮放 位移 矩陣 原點 這六種型別的變形處理,下面將詳細講解transform的使用。變形 旋轉 rotate div.box 順時針旋轉45度 變形 扭曲 skew div.box 通過skew 函式將長方形變成平行四邊形。...