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>
