css - CSSのみで回転立方体を作成する

Question

コンテストに取り組んでいますが、いくつか問題があります。CSS のみを使用して立方体 (回転) を作成する必要があります。使用する必要がある唯一の HTML コードは次のとおりです。

 <div id="container">
  <div id="imasters-cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
  </div>
</div>

必要な結果を確認できるように、画像を貼り付けました。

http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a

これまでのところ、絶対配置要素を使用して 6 つの面を作成していますが、CSS のみを使用して回転させる方法がわかりません。いいえJSでお願いします！

どうもありがとう