Pseudo 3d effect with CSS transforms? - css

Question

I have a div containing small div's that each have a background-image of a colored ball:
<div class="container">
<div class="ball" style="left: 100px; top: 50px;">
<div class="ball" style="left: 120px; top: 100px;">
<div class="ball" style="left: 140px; top: 150px;">
<div class="ball" style="left: 160px; top: 200px;">
<div class="ball" style="left: 180px; top: 250px;">
</div>
Now I would like to create some sort of pseudo 3D effect, where the balls that have a smaller value of 'top' are smaller , and balls that are more near the bottom appear larger.
I've read some bits about CSS3 transforms and perspective, but I have no idea how to do it.
Is there any way to adjust the width and height of div's , based on its top-property ?

Answer 1

You can create a variable to store top value in css like this style="--top: 10px" and use it later like this var(--top).
Update
You need to use JavaScript to set the --top property using setProperty method and you can get the value of --top using getPropertyValue method. See the example for dynamically changing --top onclick event which changes the --top value and width and height are adjusted automatically.
Code Snippet
balls = document.getElementsByClassName('ball');
Array.prototype.forEach.call(balls, function(ball){
ball.onclick = function() {
ball.style.setProperty('--top', parseInt(ball.style.getPropertyValue('--top')) * 1.2 + 'px')
}
})
.ball {
background-image:url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Soccer_ball.svg);
width: calc(var(--top) * 1.2);
height: calc(var(--top) * 1.2);
background-size: cover;
position: absolute;
}
<div class="container">
<div class="ball" style="left: 100px; --top: 50px;"></div>
<div class="ball" style="left: 120px; --top: 100px;"></div>
<div class="ball" style="left: 140px; --top: 150px;"></div>
<div class="ball" style="left: 160px; --top: 200px;"></div>
<div class="ball" style="left: 180px; --top: 250px;"></div>
</div>

Answer 2

You can set a real 3d transform on the containing element:
.container {
width: 400px;
height: 300px;
position: relative;
perspective: 300px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
transform: rotateX(60deg);
transform-style: preserve-3d;
border: solid 2px green;
}
.ball {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: lightblue;
position: absolute;
transform: rotateX(-60deg);
transform-style: preserve-3d;
}
<div class="container">
<div class="inner">
<div class="ball" style="left: 100px; top: 50px;"></div>
<div class="ball" style="left: 120px; top: 100px;"></div>
<div class="ball" style="left: 140px; top: 150px;"></div>
<div class="ball" style="left: 160px; top: 200px;"></div>
<div class="ball" style="left: 180px; top: 250px;"></div>
</div>
</div>