Usando translateX e Y

by Lucas Silva

HTML

<!-- Usando translate ao invés de left top para ganhar performance da aplicação-->
<div class='container'>
  <div class="ret red"></div>
  <div class="ret blue"></div>
  <div class="ret right"></div>
  <div class="ret left"></div>
</div>

CSS

.container {
    width: 100%
  }
  .ret {
    width: 50px;
    height: 50px;
    margin-bottom: 3px;
  }
  .red {
    background: red;
    transform: translateX(10px)
  }
  .blue {
    background: blue;
    transform: translateX(-10px)
  }
  
  .left {
    background: red;
    left: 10px;
    position: relative;
  }
  
 .right {
    background: blue;
    right: 10px;
    position: relative;
  }