11. CSS3高級特效
11.1 CSS3變形
-
CSS3變形是一些效果的集合， 如平移、旋轉、縮放、傾斜效果
-
每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化
-
語法
transform:[transform-function] ; /* 設置變形函數，可以是一個，也可以是多個，中間以空格分開*/
11.2 變形函數
| 函數名稱 | 說明 |
|---|---|
| translate() | 平移函數，基于X、Y坐標重新定位元素的位置 |
| scale() | 縮放函數，可以使任意元素對象尺寸發生變化 |
| rotate() | 旋轉函數，取值是一個度數值 |
| skew() | 傾斜函數，取值是一個度數值 |
- 瀏覽器的兼容性
| 屬 性 名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| 2D transform | 9+ | 3.5+ | 4.0+ | 10.5+ | 3.1+ |
11.3 2D位移
-
translate 是相對于元素本身的位置進行左右，上下平移
-
語法
translate(tx,ty); -
tx: X軸（橫坐標）移動的向量長度，可以是負數
-
ty: Y軸（橫坐標）移動的向量長度，可以是負數
-
案例代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>translate</title><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/common.css" /><style>ul {overflow: hidden;margin: 20px auto;width: 980px;border: 1px solid #000;padding: 20px;}li {float: left;margin-right: 10px;}a {display: block;background-color: #f7ae66;height: 40px;border-radius: 5px;line-height: 40px;width: 90px;color: #fff;text-align: center;transition: all 0.1s linear;}a:hover {background-color: rgba(242, 88, 6, 0.87);/* transform: translate(4px, 8px); */transform: translateX(4px) translateY(8px);}</style></head><body><div class="box"><ul><li><a href="#">服裝城</a></li><li><a href="#">美妝館</a></li><li><a href="#">超市</a></li><li><a href="#">全球購</a></li><li><a href="#">閃購</a></li><li><a href="#">團購</a></li><li><a href="#">拍賣</a></li><li><a href="#">金融</a></li></ul></div></body> </html> -
效果圖
11.4 2D縮放
-
scale是元素進行縮放變形函數
-
語法
scale(sx,sy); -
scale()函數可以只接收一個值，也可以接收兩個值，只有一個值時，第二個值默認和第一個值相等
-
scaleX(sx)：表示只設置X軸的縮放
-
scaleY(sy)：表示只設置Y軸的縮放
-
案例代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>scale</title><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/common.css" /><style>ul {overflow: hidden;margin: 20px auto;width: 980px;border: 1px solid #000;padding: 20px;}li {float: left;margin-right: 10px;}a {display: block;background-color: #f7ae66;height: 40px;border-radius: 5px;line-height: 40px;width: 90px;color: #fff;text-align: center;transition: all 0.1s linear;}a:hover {background-color: rgba(242, 88, 6, 0.87);transform: scale(1.1);}</style></head><body><div class="box"><ul><li><a href="#">服裝城</a></li><li><a href="#">美妝館</a></li><li><a href="#">超市</a></li><li><a href="#">全球購</a></li><li><a href="#">閃購</a></li><li><a href="#">團購</a></li><li>
