【響應式Web設計】讀書筆記
阿新 • • 發佈：2019-01-24
【簡介】CSS3 過渡、CSS3 變形
1. CSS3 過渡
CSS3 的過渡是創造視覺效果的方式，例如滑鼠懸停在連結上時，連結會從狀態一（沒有紅線）漸進地切換到狀態二（帶有紅線）。
其中，過渡效果通過以下這行程式碼：
transition: box-shadow 1s;在 box-shdow 上，耗時 1 秒，從現存狀態切換到懸停狀態。完整 HTML 如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"> 1.1 過渡的相關屬性
過渡可以用四個屬性宣告：
- transition-property：要過渡的 CSS 屬性的名字（茹 background-color、text-shadow 或者 all，all 會過渡所有可以過渡的屬性）。
- transition-duration：定義過渡效果持續的時長（用秒進行定義，例如.3s、2s 或 1.5s）。
- transition-timing-function：定義過渡期間的速度變化（例如 ease、linear、ease-in、ease-out、ease-in-out 或者 cubic-bezier）。
- transition-delay：定義過渡開始前的延遲時間。
單獨使用各種過渡屬性建立過渡效果的語法如下：
.style {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}同時我們可以將這些獨自宣告的屬性組合成一個簡寫版：
transition: all 1s ease 0s;在使用簡寫的方式的時候，第一個和時間相關的值會被應用給 transition-duration，而第二個則會被應用到 transition-delay上。
過渡調速函式一般是預置好的貝塞爾曲線：
2. CSS 2D變形
過渡是從一種狀態平滑轉換到另一種狀態，而變形則定義了元素將會變成什麼樣子。
可用的 CSS3 變形有兩種： 2D 和 3D。2D 變形的實現更廣泛，瀏覽器支援更好，寫起來也更簡單。CSS3 的 2D 變形模組允許我們使用下列變形：
- scale：用來縮放元素（放大和縮小）
- translate：在螢幕上移動元素（上下左右）
- rotate：按照一定角度旋轉元素（單位為度）
- skew：沿 X 和 Y 軸對元素進行斜切
- matrix：允許你以畫素精度來控制變形效果
我們以以下的元素為示例：
<div class="outer">
<div class="scale">scale(1.4)</div>
<div class="translate">translate(-20px, -20px)</div>
<div class="rotate">rotate(30deg)</div>
</div>.outer {
margin: 200px;
}
.outer div {
display: inline-block;
padding: 20px 10px;
margin: 5px;
background-color: #ccc;
}2.1 scale 縮放元素
為第一個元素新增縮放樣式：
.scale:hover {
transform: scale(1.4);
}當滑鼠懸停在該元素上時，元素放大到原來的 1.4 倍。
2.2 translate 偏移元素
為第二個元素新增：
.translate:hover {
transform: translate(-20px, -20px);
}將元素從原來的位置上偏移一定距離，第一個值是 X 軸上的偏移量，第二個值是 Y 軸上的偏移量，正值讓元素向右或向下偏移，負值讓元素向左或向右偏移。
當滑鼠懸停時，元素向左偏移 20px，向上偏移 20px。
2.3 rotate 旋轉
.rotate:hover {
transform: rotate(30deg);
}當滑鼠懸停時，元素旋轉30度。
