CSS3 큐브 3D 회전 애니메이션 특수 효과

<div id="main-wrapper">
  <div id="maincube" class="cube" style="--cubesize:400px;--anim:maincuberotation;">
    <div class="front"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>

    <div id="smallcube" class="cube" style="--cubesize:200px;--anim:subcuberotation;">
      <div class="front"></div>
      <div class="back"></div>
      <div class="right"></div>
      <div class="left"></div>
      <div class="top"></div>
      <div class="bottom"></div>

      <div id="smallercube" class="cube" style="--cubesize:100px;">
        <div class="front"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</div>

这是一款纯CSS3绘은 3D 체형 보정 형식을 사용하여 더 많은 CSS3 수정 방법을 사용할 수 있습니다.