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.
