The matrix CSS function specifies a 2D transformation in the form of a transformation matrix of the six values a, b, c, d, e, f.
<matrix()> =
matrix(
<number>#{6}
) <number> An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<!doctype html>
<html>
<head>
<style>
div
{
background-image: url("/assets/svg/HappyFace.svg");
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<button>initial</button>
<button value="matrix(1, 0, 0, 1, 200, 100)">number</button>
<div>matrix</div>
<script>
function myfunction(myparameter)
{
document.querySelector("div").style.transform = myparameter;
}
const myelements = document.querySelectorAll("button");
for(const myelement of myelements)
{
const myargument = myelement.value || myelement.innerHTML;
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>