what does scale3d() function really do? - css

Question

scale3d(sx, sy, sz)
I can't understand what scale3d() really do when I change (sz) Value
In this below code you can see the value of (sz) is = 1
body{perspective:600px}
div{
width: 300px;
height: 300px;
background-color: burlywood;
margin: auto;
border-radius:40px;
transition: all 5s ease-in-out;
transform: scale3d(1,1,1)
}
<div></div>
In this below code you can see the value of (sz) is = 0.5
but nothing changed the same result
body{perspective:600px}
div{
width: 300px;
height: 300px;
background-color: burlywood;
margin: auto;
border-radius:40px;
transition: all 5s ease-in-out;
transform: scale3d(1,1,0.5)
}
<div></div>
Note : I tried all solutions & values but nothing happened

Answer 1

The third number in scale3d is for the z-axis, which is only applicable to three-dimensional shapes.
Your examples have perspective, but they're still just use two-dimensional shapes, so nothing happens.
You can see the effect with a true cube:
scale3d(1,1,1)
#wrapper {
perspective: 1200px;
width: 200px;
height: 200px;
margin: 80px auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1, 1,1);
transition: transform 1s;
}
#cube>div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
#cube>div span {
margin: auto;
font-size: 50px;
}
#left {
background-color: rgba(25, 25, 112, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#right {
background-color: rgba(47, 79, 79, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
#front {
background-color: rgba(119, 136, 153, 0.7);
transform: rotateY(0deg) translateZ(100px);
}
#back {
background-color: rgba(72, 61, 139, 0.7);
transform: rotateX(180deg) translateZ(100px);
}
#top {
background-color: rgba(0, 128, 128, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
background-color: rgba(70, 130, 180, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<div id="wrapper">
<div id="cube">
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="front"><span>front</span></div>
<div id="back"><span>back</span></div>
<div id="top"><span>top</span></div>
<div id="bottom"><span>bottom</span></div>
</div>
</div>
scale3d(1,1,0.5)
#wrapper {
perspective: 1200px;
width: 200px;
height: 200px;
margin: 50px auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1,1,0.5);
transition: transform 1s;
}
#cube > div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
#cube > div span {
margin: auto;
font-size: 50px;
}
#left {
background-color: rgba(25,25,112,0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#right {
background-color: rgba(47,79,79,0.7);
transform: rotateY(90deg) translateZ(100px);
}
#front {
background-color: rgba(119,136,153,0.7);
transform: rotateY(0deg) translateZ(100px);
}
#back {
background-color: rgba(72,61,139,0.7);
transform: rotateX(180deg) translateZ(100px);
}
#top {
background-color: rgba(0,128,128,0.7);
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
background-color: rgba(70,130,180,0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<div id="wrapper">
<div id="cube">
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="front"><span>front</span></div>
<div id="back"><span>back</span></div>
<div id="top"><span>top</span></div>
<div id="bottom"><span>bottom</span></div>
</div>
</div>

Answer 2

What is Scale3d?
(Sample at end, see link)
Your 1st code:
transform: scale3d(1,1,1)
Your 2nd code:
transform: scale3d(1,1,0.5)
This is:
scale3d ( <scaling-value-x> , <scaling-value-y> , <scaling-value-z> )
Your example is a 2d shape with no effect thats why. Z pane is used to make 3d objects.
Try Here and see how it works.