Toban,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS transform matrix</title>
</head>
<body>
<div id="image" style="width: 50px; height: 25px; background: linear-gradient(to right, red, black);"></div>
<script>
window.onload = function () {
const body = document.getElementById('image');
const degree = Math.PI / 180, rotateSpeed = 4 * degree, translateSpeed = 2;
let x = 0, y = 0, angle = 0;
function rotateLeft() {
angle -= rotateSpeed;
updateTransform();
}
function rotateRight() {
angle += rotateSpeed;
updateTransform();
}
function translateForward() {
x += translateSpeed * Math.cos(angle);
y += translateSpeed * Math.sin(angle);
updateTransform();
}
function translateBackward() {
x -= translateSpeed * Math.cos(angle);
y -= translateSpeed * Math.sin(angle);
updateTransform();
}
function updateTransform() {
body.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
}
function updateTransform1() {
let cos = Math.cos(angle), sin = Math.sin(angle);
body.style.transform = `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${x}, ${y})`;
}
runOnKeys(rotateLeft, 'KeyA', 'ArrowLeft');
runOnKeys(rotateRight, 'KeyD', 'ArrowRight');
runOnKeys(translateForward, 'KeyW', 'ArrowUp');
runOnKeys(translateBackward, 'KeyS', 'ArrowDown');
updateTransform();
function runOnKeys(func, ...codes) {
let pressed = new Set();
document.addEventListener('keydown', function (event) {
pressed.add(event.code);
for (let code of codes) if (pressed.has(code)) return func();
});
document.addEventListener('keyup', function (event) {
pressed.delete(event.code);
});
}
};
</script>
</body>
</html>