技術標籤：自學

CSS3 2D變形 transform
元素移動：translate
1 .定義2D轉換中的移動，沿著X軸和Y軸移動元素
2 .translate最大的優點，不會影響到其他元素的位置
3 .translate中的百分比是相對於元素自身大小來說的
4 .對行內標籤沒有效果

section {
	transform: translate(10px, 20px);
}
section {
	transform: translate(50%， 50%);
}
section {
	transform: translateX(10px);
}
section {
	transform: translateY
 
(20px);
}

元素縮放 scale
transform: scale(x, y);
x和y預設為1倍，x或者y取值大於1，放大， x或者y取值小於1，縮小
scale放大和縮小都不會影響其他盒子，且可以手動設定縮放的中心點

section {
	transform: scale(0.8, 1);
}
section {
/*高度不指定數值，則預設和寬度一樣也是0.8倍*/
	transform: scale(0.8);
}
section {
	transform: scaleX(0.8);
}
section {
	transform: scaleY(1.5);
}

元素旋轉 rotate
transform: rotate(90deg);

元素傾斜 skew
transform: skew(30deg， 0deg); 第二個數值不寫預設為0

2D轉換綜合寫法：
transform: translate() rotate() scale()…;
順序的變化會影響最終效果，當同時擁有位移和其他屬性的時候，記得要將位移放到最前面。

CSS3 動畫 animation
相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。

@keyframes movie {
	from {
		/*開始點*/
		transform: translateX(0);
	}
	to {
		/*結束點*/
		transform: translateX(100px);
	}
}

2 .呼叫動畫

section {
	/*動畫名詞，呼叫 必須寫*/
	animation-name: movie;
	/*指定動畫的持續時間  必須寫*/
	animation-duration: 10s;
	/*指定動畫播放的次數 預設為1次，infinite為無限迴圈 可省略*/
	animation-iteration-count: infinite;
	/*指定動畫的執行曲線，預設為ease， 可省略*/
	animation-timing-function: ease-in;
	/*指定動畫的開始時間，預設為0， 可省略*/
	animation-delay: 0;
	/*指定動畫是否在下一週期逆向播放，預設為否normal， 可省略*/
	ainimation-direction: alternate;
	/*指定動畫正在執行或者停止， 預設為running， 可省略*/
	animation-play-state: paused;
	/*指定動畫結束後的狀態，forwards保持結束狀態，預設為backwards回到起始狀態，可省略*/
	animation-fill-mode: forwords;
}

animation-timing-function有一個特殊屬性steps(n)，步長，規定了動畫從開始到結束分幾步完成,它不像其他屬性那麼柔和，執行過程中是卡頓效果。
屬性簡寫：
animation: 動畫名稱 動畫時間 執行曲線 何時開始 播放次數 是否反方向；
注意：簡寫屬性裡面不包含animation-play-state。

3 . 多組動畫(進度條方式)

@keyframes movie {
	0% {
		/*起始位置，也就是元素初始的位置，可以省略不寫，也可以空著*/
		transform: translate(0, 0);
	}
	10% {
		/*一階段*/
		transform: translate(100px, 0);
	}
	40% {
		/*二階段*/
		transform: translate(300px, 0) scale(2);
	}
	60% {
		/*三階段*/
		transform: translate(300px, 280px) scale(1) rotate(90deg);
	}
	90% {
		/*四階段*/
		transform: translate(0, 280px);
	}
	100% {
		/*結束階段*/
		transform: translate(0, 0);
	}
}

同一個元素可以新增多組動畫，每組動畫之間用逗號分隔。

CSS 3D轉換
1 . 3D位移translate3d(x, y, z)
3D移動就是在2D移動的基礎上多了一個移動的方向，也就是Z軸，Z軸一般用精確的PX畫素單位，極 少用百分比單位。Z軸的移動效果必須依賴於透視。

2 .3D旋轉rotate3d(x, y, z)
transform: rotateX(deg);
transform: rotateY(deg);
transform: rotateZ(deg);
旋轉的方向遵循左手法則。

3 .透視perspective
透視也叫做視距，視距就是眼睛到螢幕的距離，單位是畫素，視距遵循近大遠小原則。
透視寫在被觀察的元素的父元素上，如果沒有父元素，寫在body上。

4 .3D呈現transform-style
讓轉換的子元素保留3D轉換，也就是控制子元素是否開啟三位立體效果，但是程式碼寫給父級，而影響的是子元素。
transform-style: flat; 預設值，不開啟
transform-style: preserve-3d; 開啟。

瀏覽器私有字首

瀏覽器的私有字首是為了支援老版本的寫法，最新版本的瀏覽器無需新增

-moz- ：代表firefox瀏覽器私有屬性

-ms-：代表IE瀏覽器私有屬性

-webkit-：代表safari、chrome私有屬性

-o-： 代表Opera私有屬性