The scale CSS property accepts 1-3 values, each specifying a scale along one axis, in the order X, Y, and Z.
object.style.scale = "value";
<'scale'> = none | <number>{1,3}
<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>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
scale: 1.5 1.5 1;
translate: 0 0 50px;
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<p>number</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
translate: 0 0 50px;
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">none</button>
<button onmouseover="myfunction(value)" value="1.5 1.5 1">number</button>
<p>scale</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".front").style.scale = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
translate: 0 0 50px;
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<button>initial</button>
<button>none</button>
<button value="1.5 1.5 1">number</button>
<p>scale</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".front").style.scale = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>