samdo,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.price {
display: flex ;
flex-direction: column;
}
.price .tiles{
height: 50px;
width: 170px;
position: relative;
margin-bottom: 4px;
}
.price .tiles > .tile{
height: 50px;
width: 170px;
line-height: 50px;
background-color: #C0C0C0;
transition: .3s;
position: absolute;
top: 0px;
transform-style: preserve-3d;
transform: rotateX(270deg);
text-align: center;
font-size: 32px;
color: #FFFFFF;
backface-visibility: hidden;
}
.price .tiles .tile.open{
z-index: 100;
transition-delay: var(--pp, 1s);
transition-duration: var(--ll, .4s);;
transform: rotateX(0deg);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let current = 1;
let {length} = blocks = document.querySelectorAll(".price .tiles");
blocks.forEach((div, i) => {
div.querySelectorAll("div").forEach(
(d, k) => {
d.style.setProperty("--pp", `${i * 100}ms`);
d.style.setProperty("--ll", `${1500 - (500 /length * i)}ms`);
})
})
const show = i => {
document.querySelectorAll(`.price .tiles > div:nth-child(${current})`).forEach(
d => {
d.classList.remove("open")
})
current = i;
document.querySelectorAll(`.price .tiles > div:nth-child(${current})`).forEach(
d => {
d.classList.add("open")
})
};
setTimeout(_ => show(current), 300);
sel.addEventListener("change", _ => show(sel.value));
});
</script>
</head>
<body>
<select name="" id="sel" onchange="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="price">
<div class="tiles">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
<div class="tiles">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
<div class="tiles">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
<div class="tiles">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
<div class="tiles">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
</div>
</body>
</html>
