26.rotate（）
函式指定的角度引數使元素相對原點進行旋轉，設定乙個角度值，指定旋轉的幅度，如果是正值，相對圓點中心順時針，負值相對於圓點中心逆時針
-ms-transform:rotate(7deg); //-ms代表ie核心識別碼
-moz-transform:rotate(7deg); //-moz代表火狐核心識別碼
-webkit-transform:rotate(7deg); //-webkit代表谷歌核心識別碼
-o-transform:rotate(7deg); //-o代表歐朋【opera】核心識別碼
transform:rotate(7deg); //統一標識語句。。。最好這句話也寫下去，符合w3c標準
27.skew（）
扭曲skew()函式能夠讓元素傾斜顯示。它可以將乙個物件以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。這與rotate()函式的旋轉不同，rotate()函式只是旋轉，而不會改變元素的形狀。skew()函式不會旋轉，而只會改變元素的形狀。
skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（x軸和y軸同時按一定的角度值進行扭曲變形）；第乙個引數對應x軸，第二個引數對應y軸
2、skewx(x)僅使元素在水平方向扭曲變形（x軸扭曲變形）
3、skewy(y)僅使元素在垂直方向扭曲變形（y軸扭曲變形）
28.縮放scale（）
讓元素根據中心點對物件進行縮放
1、 scale(x,y)使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放）
注意：y是乙個可選引數，如果y不設定，表示x，y縮放倍數相同
2、scalex(x)元素僅水平方向縮放（x軸縮放）
3、scaley(y)元素僅垂直方向縮放（y軸縮放）
注意：
scale預設值是1，如果取值在0.01-0.99之間表示縮小
取值大於等於1.01表示放大
29.translate()
可以將元素按指定方向移動，類似position中的relative。不影響web的其他元件
translate我們分為三種情況：
1、translate(x,y)水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）
2、translatex(x)僅水平方向移動（x軸移動）
3、translatey(y)僅垂直方向移動（y軸移動）
例子：
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
表示不知道寬度和高度的元素水平垂直居中
30.matrix（）
含有六個值（a,b,c,d,e,f）的變換矩陣，基於水平和垂直方向重新定位元素
就是基於水平方向（x軸）和垂直方向（y軸）重新定位元素
例子：通過matrix實現translate（100px，100px）效果
-webkit-transform: matrix(1,0,0,1,100,100);
transform: matrix(1,0,0,1,100,100);
31.原點transform－origin
任何元素都有乙個中心點，位於x軸和y軸的50%處
在沒有重置的情況下，css的各種操作都是以自己中心位置進行變形
但也可以改變中心位置
例如：background: orange;
color: #fff;
-webkit-transform: skew(15deg);
-moz-transform: skew(15deg);
transform: skew(15deg);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;
}／／將元素的原點重置到右上角，然後進行15度的扭曲。
CSS動畫效果
2d 3d 轉換 1 通過2d 3d 轉換，我們能夠對元素進行移動 縮放 轉動 拉長 拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果，可以使用2d或 3d轉換來轉換元素 2 2d transform 屬性 轉換方法的值 1 translate 水平移動 垂直移動 移動 2 rotate 數字 de...
CSS動畫效果
css變形效果 transform translate 平移 translate x,y translatex x translatey y 相對於元素原始位置平移。scale 縮放 大於1放大，小於1縮小。rotate 旋轉 單位 deg度 grad 梯度 rad 弧度 turn 轉 圈 tran...
CSS常用動畫效果
1.標題兩邊的小橫槓 標題 title before after 2.滑鼠手型 cursor屬性 a href input type submit input type image input type button label for select,button 3.小三角 下 bottom 上 ...