Rubik's Cube Code Using HTML,CSS And JavaScript
Published: 2023-05-31 05:29:13

Welcome To Codewithrandom Blog. In This Blog, We Learn How to Create Rubik's Cube Code Using **[Rubik's Cube](https://www.codewithrandom.com/2023/02/16/rubiks-cube-html-code-rubiks-cube-coding-codewithrandom/)** Code Using HTML, CSS, And JavaScript. We use JavaScript for 3D Rubik's Cube, You can Turn Rubik's Cube all over Side. 

So let's create this Rubik's Cube Code.

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>
```
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.

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;
}
```

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);
```
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.

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](https://www.codewithrandom.com/2023/02/16/rubiks-cube-html-code-rubiks-cube-coding-codewithrandom/)** 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