一、CSS3 新增屬性
(6)3D
(7)過渡
(8)動畫
(9)多列
二、CSS3 新增屬性詳解
2.6 3D屬性
2.6.1 transform
Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。
語法
transform: none|transform-functions
值 | 描述 |
---|---|
none | 定義不進行轉換。 |
matrix(n,n,n,n,n,n) | 定義 2D 轉換,使用六個值的矩陣。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換,使用 16 個值的 4x4 矩陣。 |
translate(x,y) | 定義 2D 轉換。 |
translate3d(x,y,z) | 定義 3D 轉換。 |
translateX(x) | 定義轉換,只是用 X 軸的值。 |
translateY(y) | 定義轉換,只是用 Y 軸的值。 |
translateZ(z) | 定義 3D 轉換,只是用 Z 軸的值。 |
scale(x[,y]?) | 定義 2D 縮放轉換。 |
scale3d(x,y,z) | 定義 3D 縮放轉換。 |
scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 |
scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 |
scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 |
rotate(angle) | 定義 2D 旋轉,在參數中規定角度。 |
rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
rotateX(angle) | 定義沿着 X 軸的 3D 旋轉。 |
rotateY(angle) | 定義沿着 Y 軸的 3D 旋轉。 |
rotateZ(angle) | 定義沿着 Z 軸的 3D 旋轉。 |
skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 |
skewX(angle) | 定義沿着 X 軸的 2D 傾斜轉換。 |
skewY(angle) | 定義沿着 Y 軸的 2D 傾斜轉換。 |
perspective(n) | 爲 3D 轉換元素定義透視視圖。 |
2.6.2 transform-origin
transform-Origin屬性允許您更改轉換元素的位置。2D轉換元素可以改變元素的X和Y軸。 3D轉換元素,還可以更改元素的Z軸。
語法
transform-origin: x-axis y-axis z-axis;
2.6.3 transform--style
transform–style屬性指定嵌套元素是怎樣在三維空間中呈現。
語法
transform-style: flat|preserve-3d;
2.7 過渡
CSS3中,我們爲了添加某種效果可以從一種樣式轉變到另一個的時候,無需使用Flash動畫或JavaScript。2.7.1 transition
語法
transition: property duration timing-function delay
/* 將鼠標懸停在一個 div 元素上,逐步改變div的寬度從 100px 到 300px*/
div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
個人理解:
過渡主要是爲網頁中元素的變化提供可視化的過程,沒加過渡效果的時候,將div盒子的長增加將在瞬間完成,加了過渡效果以後,這個增長的過程將會變得緩慢,用戶可以直觀看到。
2.8 動畫
CSS3 可以創建動畫,它可以取代許多網頁動畫圖像、Flash 動畫和 JavaScript 實現的效果2.8.1 @keyframes
規則
在css中,@keyframes
規則可以使用來創建動畫,創建動畫是通過逐步改變從一個CSS樣式到另一個CSS樣式。創建動畫規則後,可以與其他元素進行捆綁。
@keyframes
規則三要素:
(1)動畫規則名稱: animation_name
通過該名稱進行元素與動畫的捆綁。
(2)變化過程與CSS樣式。
1)from 、to
from: 初始的CSS樣式
to:改變之後的CSS樣式
{
from {background: red;}
to {background: yellow;}
}
2)%
0%:初始狀態CSS樣式
100%:完成時CSS樣式
中間過渡階段可以有多個
{
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;}
}
完整動畫規則案例:
myanimation:動畫規則名
@keyframes myanimation
{
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;}
}
綁定動畫規則
div
{
animation:myanimation 5s;
}
2.8.2 animation
使用簡寫屬性把 animation 綁定到一個網頁元素
語法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name
指定要綁定到選擇器的關鍵幀的名稱
duration
動畫指定需要多少秒或毫秒完成
timing-function
設置動畫將如何完成一個週期
delay
設置動畫在啓動前的延遲間隔
iteration-count
定義動畫的播放次數
direction
指定是否應該輪流反向播放動畫
fill-mode
規定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應用到元素的樣式
play-state
指定動畫是否正在運行或已暫停
2.9 多列
CSS3 可以將文本內容設計成像報紙一樣的多列布局
column-count
指定元素應該被分割的列數。
column-fill
指定如何填充列
column-gap
指定列與列之間的間隙
column-rule
所有 column-rule-* 屬性的簡寫
column-rule-color
指定兩列間邊框的顏色
column-rule-style
指定兩列間邊框的樣式
column-rule-width
指定兩列間邊框的厚度
column-span
指定元素要跨越多少列
column-width
指定列的寬度
columns
設置 column-width 和 column-count 的簡寫
column-count:3;
column-gap:40px;
column-rule-style:dotted;
這兩天由於有事情忙,所以學習的內容有點少。