CSS3?2D 轉(zhuǎn)換
CSS3 轉(zhuǎn)換
CSS3 轉(zhuǎn)換可以對元素進行移動猎荠、縮放粪滤、轉(zhuǎn)動斧拍、拉長或拉伸。
它是如何工作杖小？
轉(zhuǎn)換的效果是讓某個元素改變形狀肆汹，大小和位置愚墓。
2D 轉(zhuǎn)換
translate()
rotate()
scale()
skew()
matrix()
實例
div{
transform:?rotate(30deg);
-ms-transform:?rotate(30deg);?/* IE 9 */
-webkit-transform:?rotate(30deg);?/* Safari and Chrome */
}
translate() 方法
translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)昂勉，從當(dāng)前元素位置移動浪册。
實例
div
{
transform:?translate(50px,100px);
-ms-transform:?translate(50px,100px);?/* IE 9 */
-webkit-transform:?translate(50px,100px);?/* Safari and Chrome */
}
translate值（50px，100px）是從左邊元素移動50個像素岗照，并從頂部移動100像素村象。
rotate() 方法
rotate()方法，在一個給定度數(shù)順時針旋轉(zhuǎn)的元素攒至。負值是允許的煞肾，這樣是元素逆時針旋轉(zhuǎn)。
實例
div
{
transform:?rotate(30deg);
-ms-transform:?rotate(30deg);?/* IE 9 */
-webkit-transform:?rotate(30deg);?/* Safari and Chrome */
}
rotate值（30deg）元素順時針旋轉(zhuǎn)30度嗓袱。
scale() 方法
scale()方法籍救，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：
實例
-ms-transform:?scale(2,3);?/* IE 9 */
-webkit-transform:?scale(2,3);?/* Safari */
transform:?scale(2,3);?/* 標(biāo)準(zhǔn)語法 */
scale（2,3）轉(zhuǎn)變寬度為原來的大小的2倍渠抹，和其原始大小3倍的高度蝙昙。
skew() 方法
語法
transform:skew(<angle> [,<angle>]);
包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度梧却，如果第二個參數(shù)為空奇颠，則默認為0，參數(shù)為負表示向相反方向傾斜放航。
skewX(<angle>);表示只在X軸(水平方向)傾斜烈拒。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
實例
div
{
transform:?skew(30deg,20deg);
-ms-transform:?skew(30deg,20deg);?/* IE 9 */
-webkit-transform:?skew(30deg,20deg);?/* Safari and Chrome */
}
skew(30deg,20deg) 元素在X軸和Y軸上傾斜20度30度广鳍。
matrix() 方法
matrix()方法和2D變換方法合并成一個荆几。
matrix 方法有六個參數(shù)，包含旋轉(zhuǎn)赊时，縮放吨铸，移動（平移）和傾斜功能。
利用matrix()方法旋轉(zhuǎn)div元素30°
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);?/* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);?/* Safari and Chrome */
}
新轉(zhuǎn)換屬性
以下列出了所有的轉(zhuǎn)換屬性:
Property描述CSS
transform? ? ? ? ? ????????適用于2D或3D轉(zhuǎn)換的元素? ? ? ? ?3
transform-origin????????允許您更改轉(zhuǎn)化元素位置? ? ? ? ? ? 3
CSS3?3D 轉(zhuǎn)換
3D 轉(zhuǎn)換
CSS3 允許您使用 3D 轉(zhuǎn)換來對元素進行格式化祖秒。
3D 轉(zhuǎn)換方法：
rotateX()
rotateY()
rotateX() 方法
rotateX()方法诞吱，圍繞其在一個給定度數(shù)X軸旋轉(zhuǎn)的元素。
實例
div
{
transform:?rotateX(120deg);
-webkit-transform:?rotateX(120deg);?/* Safari 與 Chrome */
}
rotateY() 方法
rotateY()方法竭缝，圍繞其在一個給定度數(shù)Y軸旋轉(zhuǎn)的元素房维。
實例
div
{
? ? ? ? transform:?rotateY(130deg);
? ? ? ? -webkit-transform:?rotateY(130deg);?/* Safari 與 Chrome */
}
轉(zhuǎn)換屬性
下表列出了所有的轉(zhuǎn)換屬性：
屬性描述CSS
transform????????????????????向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。????????????????????????????3
transform-origin???????????允許你改變被轉(zhuǎn)換元素的位置抬纸。? ? ? ? ? ? ? ? ? ? ? 3
transform-style????????????規(guī)定被嵌套元素如何在 3D 空間中顯示咙俩。? ? ? ? ?3
perspective????????????????規(guī)定 3D 元素的透視效果。????????????????????????????????3
perspective-origin????????規(guī)定 3D 元素的底部位置松却。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3
backface-visibility????????定義元素在不面對屏幕時是否可見暴浦。? ? ? ? ? ? ? ? ?3
CSS3?過渡
CSS3中溅话，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候晓锻，無需使用Flash動畫或JavaScript歌焦。用鼠標(biāo)移過下面的元素：
它是如何工作？
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果砚哆。
要實現(xiàn)這一點独撇，必須規(guī)定兩項內(nèi)容：
指定要添加效果的CSS屬性
指定效果的持續(xù)時間。
實例
應(yīng)用于寬度屬性的過渡效果躁锁，時長為 2 秒：
div
{
transition:?width?2s;
-webkit-transition:?width?2s;?/* Safari */
}
注意：?如果未指定的期限纷铣，transition將沒有任何效果，因為默認值是0战转。
指定的CSS屬性的值更改時效果會發(fā)生變化搜立。一個典型CSS屬性的變化是用戶鼠標(biāo)放在一個元素上時：
規(guī)定當(dāng)鼠標(biāo)指針懸浮(:hover)于 <div>元素上時：
div:hover
{
?width:300px;
}
注意：?當(dāng)鼠標(biāo)光標(biāo)移動到該元素時，它逐漸改變它原有樣式
多項改變
要添加多個樣式的變換效果槐秧，添加的屬性由逗號分隔：
添加了寬度啄踊，高度和轉(zhuǎn)換效果：
div
{
transition:?width?2s,?height?2s,?transform 2s;
-webkit-transition:?width?2s,?height?2s,?-webkit-transform 2s;
}
過渡屬性
下表列出了所有的過渡屬性:
屬性描述????????????????????????????????????????????????????????????????????????????????????????????????????????????????????CSS
transition????????????????????????????????簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性刁标。????????3
transition-property????????????????????規(guī)定應(yīng)用過渡的 CSS 屬性的名稱颠通。????????????????????????????3????
transition-duration????????????????????定義過渡效果花費的時間。默認是 0膀懈。????????????????????????3
transition-timing-function????????規(guī)定過渡效果的時間曲線顿锰。默認是 "ease"。? ? ? ? ? ? ? ? ?3
transition-delay????????????????????????規(guī)定過渡效果何時開始启搂。默認是 0硼控。????????????????????????????3
實例
在一個例子中使用所有過渡屬性：
div
{
transition-property:?width;
transition-duration:?1s;
transition-timing-function:?linear;
transition-delay:?2s;
?/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
與上面的例子相同的過渡效果，但是使用了簡寫的 transition 屬性：
div
{
transition:?width?1s linear 2s;
?/* Safari */
-webkit-transition:width?1s linear 2s;
}
CSS3 動畫
CSS3 可以創(chuàng)建動畫胳赌，它可以取代許多網(wǎng)頁動畫圖像淀歇、Flash 動畫和 JavaScript 實現(xiàn)的效果。
CSS3 @keyframes 規(guī)則
要創(chuàng)建 CSS3 動畫匈织，你需要了解 @keyframes 規(guī)則浪默。
實例
@keyframes myfirst
{
from?{background:?red;}
to?{background:?yellow;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
from?{background:?red;}
to?{background:?yellow;}
}
@keyframes 規(guī)則是創(chuàng)建動畫。
@keyframes 規(guī)則內(nèi)指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式缀匕。
CSS3 動畫
當(dāng)在?@keyframes?創(chuàng)建動畫纳决，把它綁定到一個選擇器，否則動畫不會有任何效果乡小。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
規(guī)定動畫的名稱
規(guī)定動畫的時長
實例
把 "myfirst" 動畫捆綁到 div 元素阔加，時長：5 秒：
div
{
animation:?myfirst 5s;
-webkit-animation:?myfirst 5s;?/* Safari 與 Chrome */
}
注意:?您必須定義動畫的名稱和動畫的持續(xù)時間。如果省略的持續(xù)時間满钟，動畫將無法運行胜榔，因為默認值是0胳喷。
CSS3動畫是什么？
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果夭织。
您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)吭露。
請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "from" 和 "to"尊惰，等同于 0% 和 100%讲竿。
0% 是動畫的開始，100% 是動畫的完成弄屡。
為了得到最佳的瀏覽器支持题禀，您應(yīng)該始終定義 0% 和 100% 選擇器。
實例
當(dāng)動畫為 25% 及 50% 時改變背景色膀捷，然后當(dāng)動畫 100% 完成時再次改變：
@keyframes myfirst
{
?0%??{background:?red;}
?25%?{background:?yellow;}
?50%?{background:?blue;}
?100%?{background:?green;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
?0%??{background:?red;}
?25%?{background:?yellow;}
?50%?{background:?blue;}
?100%?{background:?green;}
}
實例
改變背景色和位置：
@keyframes myfirst
{
?0%??{background:?red;?left:0px;?top:0px;}
?25%?{background:?yellow;?left:200px;?top:0px;}
?50%?{background:?blue;?left:200px;?top:200px;}
?75%?{background:?green;?left:0px;?top:200px;}
?100%?{background:?red;?left:0px;?top:0px;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
?0%??{background:?red;?left:0px;?top:0px;}
?25%?{background:?yellow;?left:200px;?top:0px;}
?50%?{background:?blue;?left:200px;?top:200px;}
?75%?{background:?green;?left:0px;?top:200px;}
?100%?{background:?red;?left:0px;?top:0px;}
}
運行myfirst動畫迈嘹，設(shè)置所有的屬性：
div
{
animation-name:?myfirst;
animation-duration:?5s;
animation-timing-function:?linear;
animation-delay:?2s;
animation-iteration-count:?infinite;
animation-direction:?alternate;
animation-play-state:?running;
?/* Safari 與 Chrome: */
-webkit-animation-name:?myfirst;
-webkit-animation-duration:?5s;
-webkit-animation-timing-function:?linear;
-webkit-animation-delay:?2s;
-webkit-animation-iteration-count:?infinite;
-webkit-animation-direction:?alternate;
-webkit-animation-play-state:?running;
}
與上面的動畫相同，但是使用了簡寫的動畫 animation 屬性：
div
{
animation:?myfirst 5s linear 2s infinite alternate;
?/* Safari 與 Chrome: */
-webkit-animation:?myfirst 5s linear 2s infinite alternate;
}
