The translate CSS function specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If the second parameter is not provided, it has a zero value.
<translate()> =
translate(
<length-percentage> ,
<length-percentage>?
) <length-percentage> =
<length> |
<percentage> <length> Specifies the length using a number followed by a unit of measurement.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
<!doctype html>
<html>
<head>
<style>
div
{
background-image: url("/assets/svg/HappyFace.svg");
height: 100px;
transform: translate(50%, 25%);
width: 100px;
}
</style>
</head>
<body>
<div>percentage</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="translate(100px, 50px)">length</button>
<button value="translate(50%, 25%)">percentage</button>
<div>translate</div>
<script>
function myfunction(myparameter)
{
document.querySelector("div").style.transform = myparameter;
}
for(const myelement of document.querySelectorAll("button"))
{
const myargument = myelement.value || myelement.innerHTML;
myelement.addEventListener("mouseover", ()=>{myfunction(myargument)});
}
</script>
</body>
</html>