css3 transform来说Matrix2D
2021-05-16 本文已影响0人
antlove
dom坐标系
坐标系.png
transform matrix [a,b,c,d,e,f] (左乘矩阵)
a c e
b d f
0 0 1
a b 作为 x轴基座标向量
c d 作为 y轴基座标向量
e f 分别为x轴 y轴偏移
偏移
e = 400
f = 300
transform:matrix(1,0,0,1,400,300);
偏移.png
旋转
a = 0.7071067811865476
b = -0.7071067811865476
c = 0.7071067811865476
d = 0.7071067811865476
注 2分之根号2 = 0.7071067811865476 = Math.sqrt(2) / 2
transform: matrix(0.7071067811865476,-0.7071067811865476,0.7071067811865476,0.7071067811865476,0,0);
旋转.png
缩放
a = 1.5
b = 0
c = 0
d = 1.5
e = 0
f = 0
transform: matrix(1.5,0,0,1.5,0,0);
缩放.png
剪切
a = 1
b= 0
c = 1
d = 1
e = 0
f = 0
transform: matrix(1,0,1,1,0,0);
剪切.png
镜像
a = 1
b = 0
c = 0
d = -1
e = 0
f = 0
transform: matrix(1,0,0,-1,0,0);
镜像.png
测试页面 matrix_2d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>matrix2d</title>
<style>
body {margin:0;}
#block {
position:absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
font-size: 20px;
line-height: 200px;
text-align: center;
border: 1px solid #ccc;
background-image: linear-gradient(0deg, pink, yellow)!important;
transition: transform 2s;
margin: -100px 0 0 -100px;
}
.btn-group {display: flex; justify-content: center; padding:100px 20px 0 0;}
.btn-group a{
display: block;
width:80px;
height:32px;
line-height: 32px;
border-radius: 6px;
border: 1px solid #ccc;
font-size:12px;
text-align: center;
margin-left: 20px;
}
.btn-group a:hover {background-color: #eee; cursor: pointer;}
.translate{ transform:matrix(1,0,0,1,400,300); }
.rotate{ transform: matrix(0.7071067811865476,-0.7071067811865476,0.7071067811865476,0.7071067811865476,0,0); }
.scale {transform: matrix(1.5,0,0,1.5,0,0);}
.shear {transform: matrix(1,0,1,1,0,0); }
.mirror {transform: matrix(1,0,0,-1,0,0);}
</style>
</head>
<body>
<div class="btn-group">
<a id="translate">偏移</a>
<a id="rotate">旋转</a>
<a id="scale">缩放</a>
<a id="shear">剪切</a>
<a id="mirror">镜像</a>
<a id="reset">重置</a>
</div>
<div id="block">Block</div>
<script>
const block = document.querySelector('#block');
const names = ['translate', 'rotate', 'scale', 'shear', 'mirror'];
names.forEach(name => {
document.querySelector(`#${name}`).addEventListener('click', function() {
[...block.classList.values()].forEach(clazz => block.classList.remove(clazz));
block.classList.add(`${name}`);
});
});
document.querySelector('#reset').addEventListener('click', function() {
[...block.classList.values()].forEach(clazz => {
block.style.transitionDuration = '0s';
block.classList.remove(clazz);
setTimeout(() => block.style.transitionDuration = '2s', 0);
});
});
</script>
</body>
</html>
