1.6 2D 转换
transform 属性控制 2D 转换
translate 平移
<p style="transform: translate(20px, 40px)">123</p>
// 右 20；下 40；
rotate 旋转
<p style="transform: rotate(30deg)">123</p>
// 顺时针 30 deg；
scale 缩放
<p style="transform: scale(2, 0.5)">123</p>
// x 2 倍；y 0.5 倍；
skew 倾斜
<p style="transform: skew(40deg, 10deg)">123</p>
// x 正下负上；y 正右负左；
矩阵变化
<p style="transform: matrix(0.866,0.5,-0.5,0.866,0,0)">123</p>
- 说明
matrix(a, b, c, d, e, f)
a,c,e
b,d,f
0,0,1
x' = ax1 + cy1 + e;
y' = bx1 + dy1 + f;
h' = 1;
a：x 缩放
d：y 缩放
b：x 倾斜
c：y 倾斜
e：x 平移
f：y 平移
b+c：旋转
- 简单玩玩
<div style="margin: 100px">
<p id="p" style="transform: matrix(1,0,0,1,0,0)">123</p>
</div>
<span>a</span>
<button onclick="matrix('a', '0.1')">a+</button>
<button onclick="matrix('a', '-0.1')">a-</button>
<br />
<span>b</span>
<button onclick="matrix('b', '0.1')">b+</button>
<button onclick="matrix('b', '-0.1')">b-</button>
<br />
<span>c</span>
<button onclick="matrix('c', '0.1')">c+</button>
<button onclick="matrix('c', '-0.1')">c-</button>
<br />
<span>d</span>
<button onclick="matrix('d', '0.1')">d+</button>
<button onclick="matrix('d', '-0.1')">d-</button>
<br />
<span>e</span>
<button onclick="matrix('e', '10')">e+</button>
<button onclick="matrix('e', '-10')">e-</button>
<br />
<span>f</span>
<button onclick="matrix('f', '10')">f+</button>
<button onclick="matrix('f', '-10')">f-</button>
<br />
<script>
var a = 1;
var b = 0;
var c = 0;
var d = 1;
var e = 0;
var f = 0;
function matrix(type, value) {
if (type == 'a') {
a = a + parseFloat(value);
} else if (type == 'b') {
b = b + parseFloat(value);
} else if (type == 'c') {
c = c + parseFloat(value);
} else if (type == 'd') {
d = d + parseFloat(value);
} else if (type == 'e') {
e = e + parseFloat(value);
} else if (type == 'f') {
f = f + parseFloat(value);
}
var tran = 'matrix('+a+','+b+','+c+','+d+','+e+','+f+')';
$('#p').css('transform', tran);
}
</script>