Rubik's Cube Code Using HTML,CSS And JavaScript

Rubik’s Cube Code Using HTML,CSS And JavaScript

Rubik’s Cube Code Using HTML, CSS, And JavaScript

 
Rubik's Cube Using HTML,CSS And JAVASCRIPT Source Code
Rubik’s Cube Using HTML, CSS, And JAVASCRIPT Source Code

 

Welcome To Codewithrandom Blog. In This Blog, We Learn How to Create Rubik’s Cube Code Using Rubik’s Cube Code Using HTML, CSS, And JavaScript. We use JavaScript for 3D Rubik’s Cube, You can Turn Rubik’s Cube all over Side. 

Live Preview Of Rubik’s Cube Code Using HTML,CSS And JavaScript

So let’s create this Rubik’s Cube Code👇.

50+ HTML, CSS & JavaScript Projects With Source Code

Code byN/A
Project DownloadLink Available Below
Language usedHTML , CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Rubik’s Cube Table

I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For Rubik’s Cube.

Html Code For Rubik’s Cube

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Rubik&#39;s cube in Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="scene" id="scene">
<div class="pivot centered" id="pivot" style="transform: rotateX(-35deg) rotateY(-135deg);">
<div class="cube" id="cube">
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
<div class="piece">
<div class="element left"></div>
<div class="element right"></div>
<div class="element top"></div>
<div class="element bottom"></div>
<div class="element back"></div>
<div class="element front"></div>
</div>
</div>
</div>
</div>
<div id="guide">
<div class="anchor" id="anchor3" style="transform: translateZ(3px) translateY(-33.33%) rotate(-270deg) translateY(66.67%)"></div>
<div class="anchor" id="anchor2" style="transform: translateZ(3px) translateY(-33.33%) rotate(-180deg) translateY(66.67%)"></div>
<div class="anchor" id="anchor1" style="transform: translateZ(3px) translateY(-33.33%) rotate(-90deg) translateY(66.67%)"></div>
<div class="anchor" id="anchor0" style="transform: translateZ(3px) translateY(-33.33%) rotate(0deg) translateY(66.67%)"></div>
</div>
<script src="./script.js"></script>
</body>
</html>

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

There Is All The Html Code For Rubik’s Cube. Now, You Can See Output Without Css And Javascript. Then We Write Css And Javascript For Code The Rubik’s Cube.

Only Html Code Output Of Rubik’s Cube

 
Rubik's Cube Using HTML,CSS And JAVASCRIPT Source Code
Rubik’s Cube Html Output

 

This is Blank Output Because of this Blank Html tag. So let’s fill this Output Using Css and JavaScript.

Css Code Of Rubik’s Cube

html, body {
height: 100%;
overflow: hidden;
background-color: #2F2F31;
}
.credits {
width: 100%;
top: 90%;
}
.text {
text-align: center;
font-family: Helvetica;
font-size: .8rem;
color: grey;
pointer-events: none;
}
.centered, .cube > .piece > .element > .sticker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.scene {
width: 100%;
height: 100%;
perspective: 1200px;
transform-style: preserve-3d;
}
.scene > .pivot {
width: 0;
height: 0;
transition: .18s;
}
.scene .anchor {
width: 2em;
height: 6em;
}
.scene div {
position: absolute;
transform-style: inherit;
}
#piece4 > .element.top > .sticker {
background-color: #DDD;
}
.cube {
font-size: 190%;
margin-left: -1em;
margin-top: -1em;
}
.cube > .piece {
width: 1.9em;
height: 1.9em;
}
.cube > .piece > .element {
width: 100%;
height: 100%;
background: #0A0A0A;
outline: 1px solid transparent;
border: 0.05em solid #0A0A0A;
border-radius: 10%;
}
.cube > .piece > .element.left {
transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg) translateZ(1em);
}
.cube > .piece > .element.right {
transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg) translateZ(1em);
}
.cube > .piece > .element.back {
transform: rotateX(0deg) rotateY(180deg) rotateZ(-90deg) translateZ(1em);
}
.cube > .piece > .element.front {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(1em);
}
.cube > .piece > .element.bottom {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(-90deg) translateZ(1em);
}
.cube > .piece > .element.top {
transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg) translateZ(1em);
}
.cube > .piece > .element > .sticker {
transform: translateZ(2px);
width: 95%;
height: 95%;
border-radius: 10%;
outline: 1px solid transparent;
box-shadow: inset 0.05em 0.05em 0.2rem 0 rgba(255, 255, 255, 0.25), inset -0.05em -0.05em 0.2rem 0 rgba(0, 0, 0, 0.25);
}
.cube > .piece > .element > .sticker.blue {
background-color: #001ca8;
}
.cube > .piece > .element > .sticker.green {
background-color: #006E16;
}
.cube > .piece > .element > .sticker.white {
background-color: #DDD;
}
.cube > .piece > .element > .sticker.yellow {
background-color: #E0AE00;
}
.cube > .piece > .element > .sticker.orange {
background-color: #FF5000;
}
.cube > .piece > .element > .sticker.red {
background-color: #DF0500;
}

27+ Free Resume Templates Using HTML And CSS

Html + Css Updated Output Of Rubik’s Cube

Rubik's Cube Using HTML,CSS And JAVASCRIPT Source Code
Rubik’s Cube Using HTML,CSS And JAVASCRIPT Source Code

JavaScript Code Of Rubik’s Cube

 var colors = ['blue', 'green', 'white', 'yellow', 'orange', 'red'],
pieces = document.getElementsByClassName('piece');
// Returns j-th adjacent face of i-th face
function mx(i, j) {
return ([2, 4, 3, 5][j % 4 |0] + i % 2 * ((j|0) % 4 * 2 + 3) + 2 * (i / 2 |0)) % 6;
}
function getAxis(face) {
return String.fromCharCode('X'.charCodeAt(0) + face / 2); // X, Y or Z
}
// Moves each of 26 pieces to their places, assigns IDs and attaches stickers
function assembleCube() {
function moveto(face) {
id = id + (1 << face);
pieces[i].children[face].appendChild(document.createElement('div'))
.setAttribute('class', 'sticker ' + colors[face]);
return 'translate' + getAxis(face) + '(' + (face % 2 * 4 - 2) + 'em)';
}
for (var id, x, i = 0; id = 0, i < 26; i++) {
x = mx(i, i % 18);
pieces[i].style.transform = 'rotateX(0deg)' + moveto(i % 6) +
(i > 5 ? moveto(x) + (i > 17 ? moveto(mx(x, x + 2)) : '') : '');
pieces[i].setAttribute('id', 'piece' + id);
}
}
function getPieceBy(face, index, corner) {
return document.getElementById('piece' +
((1 << face) + (1 << mx(face, index)) + (1 << mx(face, index + 1)) * corner));
}
// Swaps stickers of the face (by clockwise) stated times, thereby rotates the face
function swapPieces(face, times) {
for (var i = 0; i < 6 * times; i++) {
var piece1 = getPieceBy(face, i / 2, i % 2),
piece2 = getPieceBy(face, i / 2 + 1, i % 2);
for (var j = 0; j < 5; j++) {
var sticker1 = piece1.children[j < 4 ? mx(face, j) : face].firstChild,
sticker2 = piece2.children[j < 4 ? mx(face, j + 1) : face].firstChild,
className = sticker1 ? sticker1.className : '';
if (className)
sticker1.className = sticker2.className,
sticker2.className = className;
}
}
}
// Animates rotation of the face (by clockwise if cw), and then swaps stickers
function animateRotation(face, cw, currentTime) {
var k = .3 * (face % 2 * 2 - 1) * (2 * cw - 1),
qubes = Array(9).fill(pieces[face]).map(function (value, index) {
return index ? getPieceBy(face, index / 2, index % 2) : value;
});
(function rotatePieces() {
var passed = Date.now() - currentTime,
style = 'rotate' + getAxis(face) + '(' + k * passed * (passed < 300) + 'deg)';
qubes.forEach(function (piece) {
piece.style.transform = piece.style.transform.replace(/rotate.(S+)/, style);
});
if (passed >= 300)
return swapPieces(face, 3 - 2 * cw);
requestAnimationFrame(rotatePieces);
})();
}
// Events
function mousedown(md_e) {
var startXY = pivot.style.transform.match(/-?d+.?d*/g).map(Number),
element = md_e.target.closest('.element'),
face = [].indexOf.call((element || cube).parentNode.children, element);
function mousemove(mm_e) {
if (element) {
var gid = /d/.exec(document.elementFromPoint(mm_e.pageX, mm_e.pageY).id);
if (gid && gid.input.includes('anchor')) {
mouseup();
var e = element.parentNode.children[mx(face, Number(gid) + 3)].hasChildNodes();
animateRotation(mx(face, Number(gid) + 1 + 2 * e), e, Date.now());
}
} else pivot.style.transform =
'rotateX(' + (startXY[0] - (mm_e.pageY - md_e.pageY) / 2) + 'deg)' +
'rotateY(' + (startXY[1] + (mm_e.pageX - md_e.pageX) / 2) + 'deg)';
}
function mouseup() {
document.body.appendChild(guide);
scene.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
scene.addEventListener('mousedown', mousedown);
}
(element || document.body).appendChild(guide);
scene.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
scene.removeEventListener('mousedown', mousedown);
}
document.ondragstart = function() { return false; }
window.addEventListener('load', assembleCube);
scene.addEventListener('mousedown', mousedown);

Final output Of Rubik’s Cube

 
Rubik's Cube Using HTML,CSS And JAVASCRIPT Source Code
Rubik’s Cube Using HTML,CSS And JAVASCRIPT Source Code
 
Rubik's Cube Using HTML,CSS And JAVASCRIPT Source Code
Rubik’s Cube Using HTML,CSS And JAVASCRIPT Source Code

Now that we have completed our javascript code section for Rubik’s Cube.  Here is our updated output with Html ,css and javascript. Hope you like the Rubik’s Cube.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you !

In this post, we learn how to create Rubik’s Cube using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for this Rubik’s Cube coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!



Leave a Reply