倒影
語法：-webkit-box-reflect:direction(above | below | left | right) 間距（畫素值）
注意1.倒影產生的效果不在標準流之內
2.對box模型產生倒影
倒影加漸變
單純使用倒影，於原圖區分不大，顯示不出效果，倒影一般與漸變配合使用
語法：-webkit-box-reflect:direction(above | below | left | right) 間距（畫素值）-webkit-linear-gradient(direc
tion,stop,stop) || -webkit-radial-gradient(center center,stop,stop)
文字同樣可以應用倒影
變形
書寫方法：
transform : 變形種類的名稱（對應的屬性值）
多個種類之間使用空格分隔。乙個( )中的屬性值之間用逗號分隔。
變形種類：
rotate(指定物件的2d旋轉）
語法：transform: rotate(30deg);
transform-origin:center center;
注意 1、rotate（angle）:讓box轉angle度，如果angle>0順時針轉動，如果angle<0,逆時針轉動；
2、預設是按中心點旋轉
3、可以改變旋轉的中心點
translate（位移）
語法：transform:translate(x,y)
第乙個引數對應x軸，第二個引數對應y軸
一般不設定中心點，因為毫無影響
scale(縮放)
語法：transform:scale(number,number)
第乙個引數對應x軸縮放倍數，第二個對應y軸
注意 1、scale(x,y) 讓box沿著x軸和y軸縮放；當x>1就放大，反之縮小，同理y也一樣
2、預設是按中心點縮放
3、可以改變縮放的中心點
skew(扭曲)
語法：transform:skew(x-angle,y-angle)
1、skew (x-angle, y-angle) 圍繞 x軸 | y軸旋轉產生的平面扭曲效果當x-angle>0:順時針圍繞x軸旋轉x-angle度;
同理y一樣
2、受中心點的影響
矩陣：
css3的全部變形效果均能夠使用矩陣來實現
語法：transform:matrix（number,number,number,number,number,number);
1,4兩個位置（a，d）用來控制縮放
5,6兩個位置（e，f）用來控制平移
2,3兩個位置（b，c）用來控制扭曲（傾斜）
1,2,3,4兩個位置（a，b，c，d）用來控制旋轉變形
當要應用兩個變形種類時，如旋轉和縮放同時使用，可以使用兩個矩陣：
transform:matrix() matrix();
css3漸變 背景 倒影 變形
一 背景切割background clip 二 背景原點 定義起點或中心點 background origin 三 背景尺寸background size 四 漸變 徑向漸變 沒規定方向時是有中間向外 預設 規定角度時，0度是由左到右，角度是逆時針變化的。filter progid dximaget...
使用CSS3製作倒影
webkit box reflect仍然是乙個非標準屬性,目前僅在chrome safari和opera瀏覽器下支援,可惜的是在firefox下並不支援這個屬性，不過值得慶幸的是，在firefox下可以通過element svg的mask來模擬實現.webkit box reflect none k...
CSS3變形效果
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...