Vertical 3D Bar using CSS - html

Question

I need this vertically:
I tried a few things, but, I'm messing up something with the bottom layer and colors inside it.
EDIT:
I want colors to be started from the bottom of the bar, going upwards.
How do I add the bottom layer of the bar? I'm messing up with its height.
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
display: block;
background-color: black;
}
.progress-wrapper {
width: 60px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.progressbar {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.side {
width: 100%;
height: 100%;
background-color: rgba(254, 254, 254, 0.3);
position: absolute;
}
/* .bottom {
transform: rotateX(90deg);
transform-origin: bottom;
} */
.back {
transform: translateZ(-60px);
}
.left {
transform: rotateY(90deg);
transform-origin: left;
}
.right {
background-color: rgba(250, 250, 250, 0.1);
transform: rotateY(-90deg);
transform-origin: right;
}
.bar {
height: 50%;
background-color: rgba(225, 0, 120, 0.6);
box-shadow: 5px 5px 50px 5px rgba(225, 0, 120, 0.3);
width: 60px;
}
<div class="wrapper">
<div class="progress-wrapper">
<div class="progressbar">
<div class="side front"><div class="bar"></div></div>
<div class="side back"><div class="bar"></div></div>
<div class="side bottom"><div class="bar"></div></div>
<div class="side left"><div class="bar"></div></div>
<div class="side right"><div class="bar"></div>
</div>
</div>
</div>
Here's the result of what I tried:
What am I doing wrong? Am I going the right way? Is there any other less messy way to do this? (NOTE: I don't want to use HTML Canvas.)

Answer 1

Try increasing the height of .bar:
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
display: block;
background-color: black;
}
.progress-wrapper {
width: 60px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.progressbar {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.side {
width: 100%;
height: 100%;
background-color: rgba(254, 254, 254, 0.3);
position: absolute;
}
/* .bottom {
transform: rotateX(90deg);
transform-origin: bottom;
} */
.back {
transform: translateZ(-60px);
}
.left {
transform: rotateY(90deg);
transform-origin: left;
}
.right {
background-color: rgba(250, 250, 250, 0.1);
transform: rotateY(-90deg);
transform-origin: right;
}
.bar {
height: 80%;
background-color: rgba(225, 0, 120, 0.6);
box-shadow: 5px 5px 50px 5px rgba(225, 0, 120, 0.3);
width: 60px;
}
<div class="wrapper">
<div class="progress-wrapper">
<div class="progressbar">
<div class="side front">
<div class="bar"></div>
</div>
<div class="side back">
<div class="bar"></div>
</div>
<div class="side bottom">
<div class="bar"></div>
</div>
<div class="side left">
<div class="bar"></div>
</div>
<div class="side right">
<div class="bar"></div>
</div>
</div>
</div>
</div>

Answer 2

Ok, I figured out the answer to my second question about colors.
Picture
According to the height of the color fill in the bar, adjust its position in the bar by using the translateY() method.
Example: By adding height: 200px; transform: translateY(100px) ( where the height of the container is 300px ) in ".bar" class in CSS solves the problem.
Still, I couldn't figure out about the bottom layer.