CSS3 ---2D/3D、過渡、動畫
阿新 • • 發佈:2019-01-26
CSS3 2D 轉換
Internet Explorer 10, Firefox, 和 Opera支援transform
屬性.
Chrome 和 Safari 要求字首 -webkit-
版本.
注意: Internet Explorer 9 要求字首 -ms-
版本.
語法:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
屬性 | 內容 |
---|---|
translate() | 根據左(X軸)和頂部(Y軸)位置給定的引數,從當前位置移動。 |
rotate() | 在一個給定度數順時針旋轉的元素,負值是允許的,這樣的元素逆時針旋轉。(如rotate值(30deg)元素順時針旋轉30度。) |
scale() | 該元素增加或減少的大小,取決於寬度(X軸)和高度(Y軸)的引數。如(scale(2,3)轉變寬度為原來的大小的2倍,和其原始大小3倍的高度。) |
skew() | 語法:transfoorm:skew(<angle> [,<angle>]); 包含兩個引數值,分別表示X軸和Y軸傾斜的角度,如果第二個引數為空,則預設為0,引數為負表示向相反方向傾斜。skewX(<angle>); 表示只在X軸(水平方向)傾斜。skewY(<angle>); |
matrix() | 該方法有6個引數,包含 旋轉,縮放,移動(平移)和傾斜功能。 |
CSS3 3D 轉換
- 轉換屬性
屬性 | 描述 |
---|---|
transform | 元素應用2D或3D轉換 |
transform-origin | 允許你改變被轉換元素的位置 |
transform-style | 規定被巢狀元素如何在 3D 空間中顯示 |
perspective | 規定 3D 元素的透視效果 |
perspective-origin | 規定 3D 元素的底部位置 |
backface-visiblity | 定義元素在不面對螢幕時是否可見 |
- 3D 轉換方法
函式 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換,使用 16 個值的 4x4 矩陣。 |
translate3d(x,y,z) | 定義 3D 轉化。 |
translateX(x) | 定義 3D 轉化,僅使用用於 X 軸的值。 |
translateY(y) | 定義 3D 轉化,僅使用用於 Y 軸的值。 |
translateZ(z) | 定義 3D 轉化,僅使用用於 Z 軸的值。 |
scale3d(x,y,z) | 定義 3D 縮放轉換。 |
scaleX(x) | 定義 3D 縮放轉換,通過給定一個 X 軸的值。 |
scaleY(y) | 定義 3D 縮放轉換,通過給定一個 Y 軸的值。 |
scaleZ(z) | 定義 3D 縮放轉換,通過給定一個 Z 軸的值。 |
rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
rotateX(angle) | 定義沿 X 軸的 3D 旋轉。 |
rotateY(angle) | 定義沿 Y 軸的 3D 旋轉。 |
rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉。 |
perspective(n) | 定義 3D 轉換元素的透視檢視。 |
CSS3 過渡
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點,必須規定兩項內容:
- 指定要新增效果的CSS屬性
- 指定效果的持續時間。
注意: 如果未指定的期限,transition將沒有任何效果,因為預設值是0。
例:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
過渡屬性
屬性 | 描述 |
---|---|
transition | 簡寫屬性,用於在一個屬性中設定四個過渡屬性。 |
transition-property | 規定應用過渡的 CSS 屬性的名稱。 |
transition-duration | 定義過渡效果花費的時間。預設是 0。 |
ransition-timing-function | 規定過渡效果的時間曲線。預設是 “ease”。 |
transition-delay | 規定過渡效果何時開始。預設是 0。 |
CSS3 動畫
當在 @keyframes 建立動畫,把它繫結到一個選擇器,否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器:
- 規定動畫的名稱
- 規定動畫的時長
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}
可以使用百分比來規定變化發生的時間
@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;}
}
CSS3 動畫屬性
屬性 | 描述 |
---|---|
@keyframes | 規定動畫。 |
animation | 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 |
animation-name | 規定 @keyframes 動畫的名稱。 |
animation-duration | 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。 |
animation-timing-function | 規定動畫的速度曲線。預設是 “ease”。 |
animation-fill-mode | 規定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應用到元素的樣式。 |
animation-delay | 規定動畫何時開始。預設是 0。 |
animation-iteration-count | 規定動畫被播放的次數。預設是 1。 |
animation-direction | 規定動畫是否在下一週期逆向地播放。預設是 “normal”。 |
animation-play-state | 規定動畫是否正在執行或暫停。預設是 “running”。 |