變形 - transform 迅速變化
1、轉換原點
預設情況下，原點是在當前物體的中心點上
修改原點:
屬性:transform-origin
值:
1、x座標 y座標
當前物體的左上點為 x:0 y:0
2、寬度百分比 高度百分比
0% 0% 左上點
50% 50% 中心點
3、關鍵字
top:上
bottom:下
left:左
right:右
center:中間
center center
left top
transform-origin:0; 表示 所有軸的位置都將歸到0點處
transform-origin:50px 50px; 表示 x軸在50畫素處，y軸在50畫素處
transform-origin:50px 50px 50px; 表示 x軸，y軸，z軸
2、變形:2d
旋**rotate()
位移:translate()
縮放:scale()
傾斜:skew()
旋**圍繞乙個參照原點(transform-origin),旋轉指定角度，預設為順時針
語法:transform:rotate(ndeg);
n為正 則按順時針旋轉
n為負 則按逆時針旋轉
注意:rotate在旋轉的過程中，不但能夠旋轉元素，同時能夠旋轉繪圖的座標系方向。如果配合著其他的變形一起來做的話，rotate在前的話，會影響之後延座標軸的其他變形。
解決方案:如果配合變形一起來做，最好將rotate放在最後乙個函式上
位移:延 座標方向 移動指定的距離
語法:translate(x軸移動距離,y軸的移動距離);
x : 正為右，負為左
y : 正為下，負為上
transform:translate(50px,50px);
注意:位移不會影響其他元素位置,單可能會蓋住周圍元素
其他兩個單方向位移:
translatex(距離);
translatey(距離);
縮放:將指定座標軸上的座標縮放指定的倍數
語法:scale(倍數)
倍數 : 0-1 之間的小數,縮小
>1 放大
scale(倍數) 表示等比縮放
其他兩個單方向縮放:
scalex(倍數);
scaley(倍數);
transform:scale(2);
傾斜:沿著座標軸方向，傾斜指定角度
語法:skew(ndeg);僅沿x軸傾斜
skew(ndeg,ndeg);沿著x軸和y軸同時傾斜
單方向傾斜:
skewx(ndeg)
skewy(ndeg)
x軸方向:角度為正，向左倒
角度為負，向右倒
y軸方向:角度為正向上傾斜
角度為負向下傾斜
3、3d變形
元素,要從立體角度觀察
座標軸,x軸，y軸，z軸
屬性:perspective
設定假定的人眼位置到投影平面的距離
如何使用：設定在父元素上的
瀏覽器相容性:
chrom,safari : -webkit-perspective
firefox : -moz-perspective
位移:3d位移可以改變元素在z軸上的位置
translatez(z);
translate3d(x,y,z);
旋**transform:
rotatex(ndeg);
rotatey(ndeg);
rotatez(ndeg);
縮放:transform:
CSS3變形效果
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...
css3變形講解
transform變形 可以實現文字或者旋轉 縮放 傾斜和移動，並且該元素下的所有子元素都隨著父元素一樣。既然接觸到transform，我們就可以做好多3d的效果啦 旋 transform rotate 角度deg deg是css3的 values and units 模組中定義的乙個角度單位 縮放...
CSS3 變形 縮放 scale
縮放 scale 函式讓元素根據中心原點對物件進行縮放。縮放 scale 具有三種情況 1 scale x,y 使元素水平方向和垂直方向同時縮放 也就是x軸和y軸同時縮放 例如 div hover注意 y是乙個可選引數，如果沒有設定y值，則表示x，y兩個方向的縮放倍數是一樣的。2 scalex x ...