Examples

by Brett Gaynor

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX -->

<div class="flex">
  <div>Static</div>
  <div class="moved">Moved</div>
  <div>Static</div>
</div>

CSS

div { 
  height: 60px;
  background-color: skyblue;
}

.flex {
  display: flex;
}

.moved {
  transform: translateX(10px); /* Equal to translate(10px) */
  background-color: pink;
  flex-grow: 2;
}