Eu tenho um elemento com transform: translateX(-150px) e quero que conforme o usuário diminuir a janela o translateX vá diminuindo, como faço isso?
body {
width: 98vw;
height 98vh;
overflow-x: hidden;
}
#exemplo {
width: 546px;
height: auto;
margin: auto;
align-content: center;
display: flex;
overflow-x: hidden;
transform: translateX(-30vw);
}
.exemplo {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<html>
<body>
<div id="exemplo">
<div class="exemplo">
</div>
<div class="exemplo">
</div>
<div class="exemplo">
</div>
<div class="exemplo">
</div>
<div class="exemplo">
</div>
<div class="exemplo">
</div>
<div class="exemplo">
</div>
</div>
</body>
</html>
Aqui tem um exemplo simples, quando eu diminuo o tamanho do navegador, da a sensação de que o valor do translate aumenta, porém eu quero a sensação seja o contrário, que dê a sensação de que está diminuindo.
