Skip to content

Instantly share code, notes, and snippets.

@kaushal83anil

kaushal83anil/index.html

Created May 6, 2024 12:14
Show Gist options
  • Save kaushal83anil/3a846f7f7c1e4063c9fbae06be88138b to your computer and use it in GitHub Desktop.
Save kaushal83anil/3a846f7f7c1e4063c9fbae06be88138b to your computer and use it in GitHub Desktop.
Download ZIP
Rotate Cube 3D
Raw
index.html
<body>
<h1>3D cube in CSS with jQuery</h1>
<div class="container-cube">
<div class="cube">
<div class="front" id="show-front">front</div>
<div class="back" id="show-back">back</div>
<div class="right" id="show-right">right</div>
<div class="left" id="show-left">left</div>
<div class="top" id="show-top">top</div>
<div class="bottom" id="show-bottom">bottom</div>
</div>
</div>
<div class="check">
<button id="front" class="hide">Front</button>
<button id="top">Top</button>
<button id="bottom">Bottom</button>
<button id="left">Left</button>
<button id="right">Right</button>
<button id="back">Back</button>
<div id="start-rotate" class="button-rotate">Start Rotate</div>
<div id="pause" class="button-rotate hide">Pause</div>
<div id="reset" class="button-rotate reset hide ">Reset</div>
</div>
<script src="cubic-script.js"></script>
</body>
Raw
script.js
$(document).ready(function(){
// short version showing the sides of the box
$("button").each(function(){
var t = $(this).attr('id');
$(this).click(function(){
$(this).addClass('hide');
$('.cube').removeClass().addClass(function() {
let cl = "cube show-" + t;
return cl;
});
$("button").not(this).removeClass('hide');
$('#pause').addClass('hide');
$('#reset').addClass('hide');
$('#start-rotate').removeClass('hide');
});
});
// rotating the box
let start = $('#start-rotate').click(function(){
$('.cube').removeClass('pause').addClass('rotate');
$(this).addClass('hide');
$('#pause').removeClass('hide');
$('#reset').removeClass('hide');
});
let pause = $('#pause').click(function(){
$('.cube').addClass('pause');
$(this).addClass('hide');
$('#start-rotate').removeClass('hide');
});
let stop = $('#reset').click(function(){
$('.cube').removeClass('rotate pause')
.addClass('show-front');
$(this).addClass('hide');
$('#pause').addClass('hide');
$('#start-rotate').removeClass('hide');
});
});
// normal version showing the sides of the box
// $("#top").click(function(){
// $(this).addClass("hide");
// $(".check button").not(this).removeClass('hide');
// $(".cube").removeClass().addClass("cube show-top");
// });
// $("#front").click(function(){
// $(this).addClass("hide");
// $(".check button").not(this).removeClass('hide');
// $(".cube").removeClass().addClass("cube show-front");
// });
// $("#bottom").click(function(){
// $(this).addClass("hide");
// $(".check button").not(this).removeClass('hide');
// $(".cube").removeClass().addClass("cube show-bottom");
// });
// $("#left").click(function(){
// $(this).addClass("hide");
// $(".check button").not(this).removeClass('hide');
// $(".cube").removeClass().addClass("cube show-left");
// });
// $("#right").click(function(){
// $(this).addClass("hide");
// $(".check button").not(this).removeClass('hide');
// $(".cube").removeClass().addClass("cube show-right");
// });
// $("#back").click(function(){
// $(this).addClass("hide");
// $(".check button").not(this).removeClass('hide');
// $(".cube").removeClass().addClass("cube show-back");
// });
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Charm|Dancing+Script|Pacifico');
body {
font-family: 'Pacifico', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Charm', cursive;
margin: 0;
padding: 0;
display: grid;
grid-template-areas:
"h1 h1 h1"
"ch co co"
"ch co co";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
justify-content: center;
align-items: center;
width: 100vw;
height: 100%;
background-image: linear-gradient(#feac5e, #c779d0, #4bc0c8);
}
h1 {
grid-area: h1;
text-align: center;
font-size: 2rem;
}
.check {
grid-area: ch;
width: 400px;
height: 100px;
text-align: center;
margin: 100px;
float: left;
position: relative;
}
button {
min-height: 30px;
min-width: 60px;
padding: 5px;
font-size: 1.2rem;
border-radius: 5px;
background-image: linear-gradient(#027868, #17bb4e);
}
.button-rotate {
/* display: flex; */
width: 100px;
height: 25px;
border-radius: 5px;
padding: 5px;
font-size: 1.3rem;
line-height: 1.3rem;
text-align: center;
margin: 10px auto;
background: linear-gradient(to top, #1f4037, #99f2c8);
box-shadow: 0px -2px 1px 3px #ddd;
color: bisque;
cursor: pointer;
}
.reset {
background: linear-gradient(to top, #b43929, #d45704);
color: rgb(145, 182, 187);
}
.container-cube {
grid-area: co;
width: 200px;
height: 200px;
position: relative;
perspective: 1200px;
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: .5s transform linear;
transform: rotateX(-10deg) rotateY(10deg);
}
.cube > div {
width: 200px;
height: 200px;
text-align: center;
padding-top: 60px;
font-size: 2rem;
color: rgba(250, 244, 250, 0.8);
position: absolute;
box-sizing: border-box;
background: rgba(241, 241, 243, .2);
}
.cube .front {
background-color: rgba(255, 255, 255, .8);
background-image: radial-gradient(ellipse at top left, transparent, rgb(40, 117, 4));
transform: rotateX(0deg) translateZ(100px);
}
.cube .back {
background-color: rgba(255, 255, 255, .8);
background-image: radial-gradient(ellipse at top left, transparent, rgb(255, 145, 0));
transform: rotateX(180deg) translateZ(100px);
}
.cube .right {
background-color: rgba(255, 255, 255, .8);
background-image: radial-gradient(ellipse at top left, transparent, rgb(17, 0, 255));
transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
background-color: rgba(202, 126, 196, .8);
background-image: radial-gradient(ellipse at top left, transparent, rgb(64, 21, 163));
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
background-color: rgba(255, 255, 255, .8);
background-image: radial-gradient(ellipse at top left, transparent, rgb(255, 0, 55));
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
background-color: rgba(221, 150, 92, .8);
background-image: radial-gradient(ellipse at top left, transparent, rgb(208, 255, 0));
transform: rotateX(-90deg) translateZ(100px);
}
.show-front { transform: rotateX(-10deg) rotateY(10deg); }
.show-top { transform: rotateX(-100deg) rotateZ(10deg); }
.show-bottom { transform: rotateX(80deg) rotateZ(-10deg); }
.show-left { transform: rotateY(100deg) rotateZ(-10deg); }
.show-right { transform: rotateY(-80deg) rotateZ(10deg); }
.show-back { transform: rotateX(-190deg) rotateY(-10deg); }
.rotate { animation: rotate-box 5s linear infinite; }
.pause { animation-play-state: paused; }
.hide { display: none; }
@keyframes rotate-box {
0% { transform: rotate3D(0,0,0,0deg); }
100% { transform: rotate3D(1,1,1,360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment