HTML CSS筆記變形效果-過渡效果-動畫效果
CSS3 提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。屬性有兩個：transform 和 transform-origin。
對於 transform 的屬性值，具體如下表：
//向水平和垂直各移動 200 像素，也可以使用百分比
transform: translate(200px,200px);
//向水平平移 200 像素，不加後面的 0 也可以
transform: translate(200px,0); transform: translateX(200px);
//向垂直平移 200 像素
transform: translate(0,200px); transform: translateY(200px);
//水平、垂直方向放大 1.5 倍transform: scale(1.5); transform: scale(1.5,1.5);
//水平、垂直方向縮小 0.8 倍
transform: scale(0.8,0.8);
//水平方向放大 1.5 倍
transform: scaleX(1.5);
//垂直方向放大 1.5 倍
transform: scaleY(1.5);
//旋轉元素，0 ~ 360 度之間，負值均可
transform: rotate(-45deg);
//傾斜元素，0 ~ 360 度之間，負值均可
transform: skew(45deg, 20deg);
//水平傾斜元素，0 ~ 360 度之間，負值均可
transform: skewX(45deg);
//垂直傾斜元素，0 ~ 360 度之間，負值均可
transform: skewY(45deg);
//通過六個數值指定矩形，其內部公式計算較為復雜，請百度吧transform: matrix(1,0,0,1,30,30);
//不同的值可以累計，通過空格分割transform: rotate(-45deg) scale(1.5);
二．transform-origin
transform-origin 屬性可以設置變換的起點。默認情況下，使用元素的中心作為起點。具體設置方案參考如下表：
這個屬性是用來改變變形的基準點的，默認是在元素的中心位置，如果你改變了基準點。 它就會按照這個基準點進行變形。
//默認值，以中心點變形
//以左上角為基準點變形transform-origin: left top; transform-origin: 0px 0px;
三．瀏覽器版本
CSS3 中的變形效果最低版本和需要前綴版本如下：
//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg); transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top; transform-origin: left top;
四.3D 變形簡介
由於 3D 是立體三維，在 x、y 軸的基礎上一般會多出一個 z 軸，深入躍出軸。以下是
3D 變形的屬性值表，如下：
3D 變形比 2D 變形出來的要晚一些，所以如果需要兼容舊版本瀏覽器，可以對照這個表。具體如下：
//兼容版本完×××式
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
-ms-transform: translateZ(200px); transform: translateZ(200px);
transform-style
transform-style 屬性是指定嵌套元素如何在 3D 空間中呈現。
//一般設置到當前元素的父元素transform-style: preserve-3d;
需要再配合後面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各 種廠商前綴。
perspective
perspective 是 3D 變形的重要屬性，該屬性會設置查看者的位置，並將可視內容映射到一個視錐上，繼而投放到一個 2D 平面上。
//設置查看者的距離位置，一般設置在元素的父元素上perspective: 1000px;
需要再配合後面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各 種廠商前綴。
3D 變形屬性
我們運用前面 3D 功能屬性 transform-style 和 perspective 來構建 3D 變形效果。
1.translate3d(x,y,z)
//需要 3D 位移的 HTML 結構，必須有父元素包含
<div id="a">
<img src="img.png" alt="" />
</div>
//CSS 部分，父元素設置 3D 呈現且設置透視距離
#a {
perspective: 1000px; transform-style: preserve-3d;
}
img {
//z 軸可以是負值
transform: translate3d(300px,100px,240px);
}
2.translateZ(z)
//可以單獨設置 z 軸，z 軸可以是負值
img {
transform: translateZ(240px);
}
3.scale3d(x,y,z)
//3D 縮放，單獨設置無效，需要配合角度
img {
transform: scale3d(1,1,1.5) rotateX(45deg);
}
4.scaleZ(z)
//單獨設置 z 軸，x 和 y 軸默認為 1 img {
transform: scaleZ(1.5) rotateX(45deg);
}
5.rotate3d(x,y,z,a)
//設置 3D 旋轉，a 表示角度，xyz 是 0 或 1 之間的數值
transform: rotate3d(1,0,0,45deg);
6.rotateX(a)、rotateY(a)、rotateZ(a)
// 單 獨 設 置 3D 旋 轉 transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
最後一個 matrix3d 就不多說了，忽略。
CSS3 還提供了 perspective-origin 屬性來設置 3D 變形中的源點角度。該屬性默認值為 50% 50%也就是 center center。
//源點設置為右上方變形perspective-origin: top right;
CSS3 還提供了一個在元素中設置透視的值 perspective(長度值)，但它還是和在父元素設置有一定不同。因為父元素整個作為透視，而元素自己作為透視，導致不同。
//具體測試看透視的距離img {
transform: perspective(1000px) rotateY(45deg);
}
過渡簡介
過渡效果一般是通過一些簡單的 CSS 動作觸發平滑過渡功能，比如：:hover、:focus、
:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能，主要屬性如下表：
我們先創建一個沒有過渡效果的元素，然後通過:hover 來觸發它。在沒有任何過渡效果的觸發，會立即生硬的執行觸發。
//設置元素樣式div {
width: 200px; height: 200px;
background-color: white; border:1px solid green;
}
//鼠標懸停後背景變黑，文字變白div:hover {
background-color: black; color: white;
margin-left: 50px;
}
transition-property
首先，設置過渡的第一個屬性就是指定過渡的屬性。同樣，你需要指定你要過渡某個元 素的兩套樣式用於用戶和頁面的交互。那麽就使用 transition-property 屬性，詳細屬性值如下表：
從上門的列表中來看，一般來說，none 用於本身有過渡樣式從而取消。而 all，則是支持所有 transition-property 樣式，還有一種是指定 transition-property 中的某些樣式。那麽 transition-proerty 支持的樣式有哪些？如下表所示：
//設置背景和文字顏色采用過渡效果
transition-property: background-color, color, margin-left;
transition-duration
如果單純設置過渡的樣式，還不能夠立刻實現效果。必須加上過渡所需的時間，因為默 認情況下過渡時間為 0。
//設置過渡時間為 1 秒鐘，如果是半秒鐘可以設置為.5s transition-duration: 1s;
transition-timing-function
當過渡效果運行時，比如產生緩動效果。默認情況下的緩動是：元素樣式從初始狀態過 渡到終止狀態時速度由快到慢，逐漸變慢，即 ease。也是默認值，其他幾種緩動方式如下表所示：
//恒定速度
transition-timing-function: linear;
以上五種都是設定好的屬性值，我們也可以自定義這個緩動。使用 cubic-bezier()
屬性值，裏面傳遞四個參數 p0,p1,p2,p3，值在 0~1 之間。
//自定義緩動
transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);
至於具體這些數值幹什麽的，怎麽才可以精確得到相關的信息，這個要了解計算機圖形 學中的三次貝塞爾曲線的相關知識，類似與 photoshop 中的曲線調色。這裏我們忽略。
還有一種不是平滑過渡，是跳躍式過渡，屬性值為：steps(n,type)。第一個值是一 個數值，表示跳躍幾次。第二個值是 start 或者 end，可選值。表示開始時跳躍，還是結束時跳躍。
//跳躍 10 次至結束
transition-timing-function: steps(10,end);
transition-delay
這個屬性可以設置一個過渡延遲效果，就是效果在設置的延遲時間後再執行。使用
transition-delay 屬性值。如果有多個樣式效果，可以設置多個延遲時間，以空格隔開。
//設置延遲效果
transition-delay: 0s, 1s, 0s;
簡寫和版本
我可以直接使用 transition 來簡寫，有兩種形式的簡寫。第一種是，每個樣式單獨聲明；第二種是不去考慮樣式，即使用 all 全部聲明。
//單獨聲明
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
//如果每個樣式都是統一的，直接使用 all transition: all 1s ease 0s;
為了兼容舊版本，需要加上相應的瀏覽器前綴，版本信息如下表：
//兼容完整版
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s; transition: all 1s ease 0s;
動畫簡介
CSS3 提供了類似 Flash 關鍵幀控制的動畫效果，通過 animation 屬性實現。那麽之前的 transition 屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果，有一定的局限性。
animation 實現動畫效果主要由兩個部分組成：
1.通過類似 Flash 動畫中的關鍵幀聲明一個動畫；
2.在 animation 屬性中調用關鍵幀聲明的動畫。
CSS3 提供的 animation 是一個復合屬性，它包含了很多子屬性。如下表所示：
除了這 9 個屬性之外，動畫效果還有一個重要的屬性，就是關鍵幀屬性：@keyframes。它的作用是聲明一個動畫，然後在 animation 調用關鍵幀聲明的動畫。
//基本格式，“name”可自定義@keyframes name {
/.../
}
屬性詳解
在講解動畫屬性之前，先創建一個基本的樣式。
//一個 div 元素
<div>我是 HTML5</div>
//設置 CSS div {
width: 200px; height: 200px;
background-color: white; border: 1px solid green;
}
1.@keyframes
//創建動畫的第一步，先聲明一個動畫關鍵幀。@keyframes myani {
0% {
background-color: white; margin-left:0px;
}
50% {
background-color: black; margin-left:100px;
}
100% {
background-color: white; margin-left:0px;
}
}
//或者重復的，可以並列寫在一起@keyframes myani {
0%, 100% {
background-color: white; margin-left:0px;
}
50% {
background-color: black; margin-left:100px;
}
}
2.animation-name
//調用@keyframes 動畫
animation-name: myani;
3.animation-duration
//設置動畫播放的時間animation-duration: 1s;
當然，以上通過關鍵幀的方式，這裏插入了三個關鍵幀。0%設置了白色和左偏移為 0， 和初始狀態一致，表明從這個地方開始動畫。50%設置了黑色，左偏移 100px。而 100%則是最後一個設置，又回到了白色和左偏移為 0。整個動畫就一目了然了。
而對於關鍵幀的用法，大部分用百分比比較容易控制，當然，還有其他一些控制方法。
//從什麽狀態過渡到什麽狀態@keyframes myani {
from {
background-color: white; margin-left:0px;
}
to {
background-color: black; margin-left:100px;
}
}
4.animation-timing-function
//設置緩動
animation-timing-function: ease-in;
3.animation-delay
//設置延遲時間animation-delay: 1s;
4.animation-iteration-count
//設置循環次數
animation-iteration-count: infinite;
5.animation-direction
//設置緩動方向交替
animation-direction: alternate;
6.animation-play-state
//設置停止播放動畫
animation-play-state: paused;
7.animation-fill-mode
//設置結束後不在返回
animation-fill-mode: forwards;
//both 需要結合，次數和播放方向animation-iteration-count: 4; animation-direction: alternate;
簡寫和版本
//簡寫形式完整版
animation: myani 1s ease 2 alternate 0s both;
為了兼容舊版本，需要加上相應的瀏覽器前綴，版本信息如下表：
//兼容完整版，Opera 在這個屬性上加入 webkit，所以沒有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both; transition: all 1s ease 0s;
//@keyframes 也需要加上前綴
@-webkit-keyframes myani {...} @-moz-keyframes myani {...}
@-o-keyframes myani {...} @-ms-keyframes myani {...} keyframes myani {...}
HTML CSS筆記變形效果-過渡效果-動畫效果