The scaleY function for CSS specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
<scaleY()> =
scaleY(
[ <number> | <percentage> ]
) <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.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
<!doctype html>
<html>
<head>
<style>
div
{
background-image: url("/assets/svg/Happy.svg");
height: 100px;
transform: scaleY(50%);
width: 100px;
}
</style>
</head>
<body>
<div>percentage</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div
{
background-image: url("/assets/svg/Happy.svg");
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<button>initial</button>
<button value="scaleY(1.5)">number</button>
<button value="scaleY(50%)">percentage</button>
<div>scaleY</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector("div").style.transform = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>