The skew CSS function specifies a 2D skew by [ax,ay] for x and y. If the second parameter is not provided, it has a zero value.
<skew()> =
skew(
[ <angle> | <zero> ] ,
[ <angle> | <zero> ]?
) <angle> A number with a unit: deg (360 degrees in a full circle), grad (400 gradians in a full circle), rad (2π radians in a full circle), or turn (1 turn in a full circle).
<zero> Represents a literal number with the value 0.
<!doctype html>
<html>
<head>
<style>
div
{
background-image: url("/assets/svg/HappyFace.svg");
height: 100px;
transform: skew(0);
width: 100px;
}
</style>
</head>
<body>
<div>zero</div>
</body>
</html>
<!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="skew(45deg, 135deg)">angle</button>
<button value="skew(0)">zero</button>
<div>skew</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>