How To Create On Click Right And Left 3D Transform Animation Using jQuery

In this topic,

We are going to see how to create on click right and left 3D transform animation using jquery.

Step-1: Create Html Code in the index.html file.

<body>
  <div id="container">
    <div id="stage">
      <div id="shape" class="ring backfaces">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
        <div class="box five">5</div>
        <div class="box six">6</div>
        <div class="box seven">7</div>
        <div class="box eight">8</div>
        <div class="box nine">9</div>
        <div class="box ten">10</div>
        <div class="box eleven">11</div>
        <div class="box twelve">12</div>
      </div>
    </div>
  <div class="buttons">
    <button type="button" class="left-side">Left Side</button>
    <button type="button" class="right-side">Right Side</button>
  </div>
  </div>
  </body>

Step-2: Add CSS Code in the <style>…</style> on index.html file.

<style>
   body {
      background-color: black;
      color: white;
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
      background-image: -webkit-gradient(radial,
                            50% 500, 1,
                            50% 500, 400,
                            from(rgba(255, 255, 255, 0.3)),
                            to(rgba(255, 255, 255, 0)));
     background-repeat: no-repeat;
    }

    #container {
      width: 100%;
      height: 700px;
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 225px;
    }
    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
    }
    
    #shape {
      position: relative;
      top: 160px;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      -webkit-transform-style: preserve-3d;
    }
    
    .box {
    position: absolute;
    height: 200px;
    width: 200px;
    border: 1px solid white;
    -webkit-border-radius: 12px;
    -webkit-box-sizing: border-box;
    text-align: center;
    font-family: Times, serif;
    font-size: 124pt;
    color: white;
    background-color: rgb(0 0 0 / 60%);
    -webkit-transition: -webkit-transform 2s, opacity 2s;
    -webkit-backface-visibility: hidden;
}

    #shape.backfaces .box {
      -webkit-backface-visibility: visible;
    }
    
    #shape {
      -webkit-animation: spin 8s infinite linear;
    }
  #shape.right{
   -webkit-animation: right 8s infinite linear;
  }
   @-webkit-keyframes right {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
    }
    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(-360deg); }
    }
  
   /* ---------- ring styles ------------- */
    .ring > .one {
      -webkit-transform: translateZ(380px);
    }

    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(380px);
    }

    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(380px);
    }

    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(380px);
    }

    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(380px);
    }

    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(380px);
    }

    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(380px);
    }

    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(380px);
    }

    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(380px);
    }

    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(380px);
    }

    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(380px);
    }

    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(380px);
    }
  .buttons{
    text-align: center;
  }
  .buttons button{
    height: 34px;
    background: transparent;
    border-color: #fff;
    color: #fff;
  } 
  </style>

Step-3: Now I added code in my <script>…</script> tag on index.html file.

<script>
    $(".left-side").click(function(){
      $("#shape").addClass("left");
       $("#shape").removeClass("right");
    });
    $(".right-side").click(function(){
      $("#shape").removeClass("left");
      $("#shape").addClass("right");
    });
  </script>

Now my cube animation is working correctly.

Review the below video.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories