title: Rotating div using CSS
body: <p>Created animation in CSS:</p>
  
  <p><a href="https://i.imgur.com/axs2dW7.gifv" rel="nofollow noreferrer">See GIF file</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    overflow: hidden;
  }
  
  #pre_preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F8F8FF;
    z-index: 99;
  }
  
  #pre_status {
    width: 75px;
    height: 100px;
    position: relative;
    left: 50%;
    top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
  }
  
  .loader__bar {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 50%;
    background: #fff;
    transform-origin: center bottom;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
  }
  
  .loader__bar:nth-child(1) {
    background: white;
    left: 0px;
    -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
  }
  
  .loader__bar:nth-child(2) {
    background: black;
    left: 15px;
    -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
  }
  
  .loader__bar:nth-child(3) {
    background: gray;
    left: 30px;
    -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
  }
  
  .loader__bar:nth-child(4) {
    background: black;
    left: 45px;
    -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }
  
  .loader__bar:nth-child(5) {
    background: white;
    left: 60px;
    -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    ;
  }
  
  @keyframes lds-facebook_1 {
    0% {
      top: 30px;
      height: 140px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_1 {
    0% {
      top: 30px;
      height: 140px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_2 {
    0% {
      top: 36px;
      height: 128px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_2 {
    0% {
      top: 36px;
      height: 128px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_3 {
    0% {
      top: 42px;
      height: 116px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_3 {
    0% {
      top: 42px;
      height: 116px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_4 {
    0% {
      top: 48px;
      height: 104px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_4 {
    0% {
      top: 48px;
      height: 104px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_5 {
    0% {
      top: 54px;
      height: 92px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_5 {
    0% {
      top: 54px;
      height: 92px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pre_preloader"&gt;
    &lt;div id="pre_status"&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I need the div to be rotated 90 degrees, <a href="https://i.imgur.com/q5Z6umc.gifv" rel="nofollow noreferrer">like this GIF file</a>.</p>
  
  <p>For this I tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    overflow: hidden;
  }
  
  #pre_preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F8F8FF;
    z-index: 99;
  }
  
  #pre_status {
    width: 75px;
    height: 100px;
    position: relative;
    left: 50%;
    top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
  }
  
  .loader__bar {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 50%;
    background: #fff;
    transform-origin: center bottom;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
  }
  
  .loader__bar:nth-child(1) {
    background: white;
    left: 0px;
    -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
  }
  
  .loader__bar:nth-child(2) {
    background: black;
    left: 15px;
    -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
  }
  
  .loader__bar:nth-child(3) {
    background: gray;
    left: 30px;
    -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
  }
  
  .loader__bar:nth-child(4) {
    background: black;
    left: 45px;
    -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }
  
  .loader__bar:nth-child(5) {
    background: white;
    left: 60px;
    -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    ;
  }
  
  @keyframes lds-facebook_1 {
    0% {
      top: 30px;
      height: 140px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_1 {
    0% {
      top: 30px;
      height: 140px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_2 {
    0% {
      top: 36px;
      height: 128px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_2 {
    0% {
      top: 36px;
      height: 128px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_3 {
    0% {
      top: 42px;
      height: 116px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_3 {
    0% {
      top: 42px;
      height: 116px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_4 {
    0% {
      top: 48px;
      height: 104px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_4 {
    0% {
      top: 48px;
      height: 104px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @keyframes lds-facebook_5 {
    0% {
      top: 54px;
      height: 92px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }
  
  @-webkit-keyframes lds-facebook_5 {
    0% {
      top: 54px;
      height: 92px;
    }
    50% {
      top: 60px;
      height: 80px;
    }
    100% {
      top: 60px;
      height: 80px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pre_preloader"&gt;
    &lt;div id="pre_status"&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
      &lt;div class="loader__bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>What changes should I make so that I can get expected result, i.e <a href="https://i.imgur.com/q5Z6umc.gifv" rel="nofollow noreferrer">see
    GIF file</a></p>
  </blockquote>
  
  <p>I want my animation like this <a href="https://i.imgur.com/q5Z6umc.gifv" rel="nofollow noreferrer">GIF File</a>.</p>