CSS3之2D转换模块
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
主要学习以下五个方法:
- translate()
- rotate()
- scale()
- skew()
- matrix()
translate() 方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
transform: translate(-70px, 20px);
快捷键:trf:t+table
rotate() 方法
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。单位:deg度数
格式
transform: rotate(45deg);
快捷键:trf:r+table
scale() 方法
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数分别是沿x,y放大倍数,如果xy方向缩放倍数一样可以简写一个参数。
transform: scale(0.8,2);
快捷键:trf:sc+tablec
skew() 方法
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
transform: skew(30deg,20deg);
可以单独使用:
transform: skewX(30deg);
matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。但是这参数太麻烦,要计算矩阵。。。
可以学习一下大佬:https://www.cnblogs.com/bbcfive/p/11155824.html
相关代码目前在这: https://github.com/karasjs/karas/blob/master/src/style/transform.js#L4-L55
连写方式
我们还可以用函数名的方式连写,而躲避了maxtrix方法。
transform: rotate(45deg) translate(-70px, 20px) scale(0.8, 2) skew(30deg, 20deg);
连写方式之间不要逗号,空格隔开即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换模块</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
width: 800px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
}
ul li {
list-style: none;
width: 100px;
height: 50px;
background-color: skyblue;
margin: 0 auto;
margin-top: 50px;
text-align: center;
line-height: 50px;
}
ul li:nth-child(2) {
transform: rotate(45deg);
}
ul li:nth-child(3) {
transform: translate(-70px, 20px);
}
ul li:nth-child(4) {
transform: scale(0.8, 2);
}
ul li:nth-child(5) {
transform: skew(30deg, 20deg);
/*transform: skewX(30deg);*/
}
ul li:nth-child(6) {
transform: rotate(45deg) translate(-70px, 20px) scale(0.8, 2) skew(30deg, 20deg);
}
</style>
</head>
<body>
<ul>
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>翻转的</li>
<li>综合的</li>
</ul>
</body>
</html>
注意点
1.2d转换模块修改元素坐标系的方向。再进行平移是按照之后的x,y方向进行平移的。如下图
##### 2D Transform 方法
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |