CSS過渡與轉換

瀏覽器前綴：

css3屬性：預覽版，尚未最終版，因此有不少兼容性問題，瀏覽器不識別。
瀏覽器爲了使這些屬性兼容，每一個瀏覽器廠商都提供了一個屬於本身瀏覽器的語法規則，瀏覽器兼容前綴。
主流瀏覽器：谷歌，IE，歐朋，火狐，蘋果
瀏覽器前綴：
-wekit- 谷歌
-moz- 火狐
-ms- IE
-o- 歐朋

盒子陰影：
box-shadow:0px 0px 0px 0px red;
水平偏移量，垂直偏移量，模糊度，影子大小，顏色

css3漸變：由瀏覽器生成，
線性漸變：
一、單一方向漸變

background:-wbkit-linear-gradient(方向，顏色1，顏色2，顏色3);
方向：
left 從左邊開始
right 從右邊開始
top 從上邊開始
bottom 從下邊開始
【注】須要添加瀏覽器前綴
background:linear-gradient(to 方向，顏色1，顏色2，顏色3);
to left 到左邊（結束）
to right
to top
to bottom
【注】不要添加瀏覽器前綴

二、對角漸變

background:-wbkit-linear-gradient(方向 方向，顏色1，顏色2，顏色3);
left top 從左上角到右下角漸變
left bottom
right top
right bottom
【注】須要添加瀏覽器前綴
background:linear-gradient(to 方向 方向，顏色1，顏色2，顏色3);
to left top
to left bottom
to right top
to right bottom
【注】不要添加瀏覽器前綴

三、角度的漸變

10deg 10度

四、默認狀況下顏色均分

能夠指定顏色分佈的百分比
background:-wbkit-linear-gradient(left,red 10%,green 40%,blue);
從10%開始漸變，前10%都是red
background:linear-gradient(to left,red 10px,green,blue);
從10px處開始漸變，前10px都是red

徑向漸變：（必定要加瀏覽器前綴）
從一個點到四周的漸變
background:-wbkit-radial-gradient(漸變位置，形狀，大小，顏色1，顏色2，顏色3);
漸變位置：默認從中心到四周
left 從左邊漸變
right
top
bottom

left top 從左上角到四周漸變
left bottom
right top
right bottom
形狀：默認橢圓 ellipse
正圓 circle
【注】元素是正方形，則都是正圓
大小：size，漸變的大小，即漸變到哪裏中止，它有四個值
closest-side:最近邊;
farthest-side:最遠邊;
closest-corner:最近角;
farthest-corner:最遠角;

漸變重複：
線性漸變
background:repeating-linear-gradient(to left,black 10%,white 20%);
-wbkit-background:repeating-linear-gradient(right,black 10%,white 20%);
徑向漸變
background:repeating-radial-gradient:(right,black 10%,white 20%);


【注】漸變用的背景屬性是background-image:;

過渡：讓元素的動畫產平生滑的效果
一、什麼屬性在作動畫 transition-property:屬性1，屬性2，...；
二、過渡時間須要多久 transition-duration:0.5s;
三、延遲時間(選寫) transition-delay:2s;
四、動畫類型(默認勻速) transition-timing-function:;

綜合寫法：
transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型

css3中的2d
    二維的平面空間

css3 2d屬性

變形屬性transform:;
2d變換

 

位移

transform:translate(水平位移，垂直位移); 一個值默認只有水平位移
transform:translateX(10px); 水平位移
transform:translateY(10px); 垂直位移
【注】正值，從上往下從左往右

 

旋轉

transform:rotate(); 默認中心旋轉
transform-origin:left top; 設置旋轉基點
transform-origin:5px 10px;

縮放

transform:scale(水平垂直都縮放的倍數); 一個值
transform:scale(水平縮放，垂直縮放); 兩個值
transform:scaleX(水平縮放);
transform:scaleY(垂直縮放);

傾斜： transform:skew(水平傾斜); 一個值 transform:skew(水平傾斜，垂直傾斜); 兩個值 transform:skewX(); transform:skewY();