Telegram Group Join Now
Rubik’s Cube Code Using HTML, CSS, And JavaScript
.png "Rubik's Cube Code Using HTML,CSS And JavaScript")
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
ADVERTISEMENT
So let’s create this Rubik’s Cube Code👇.
50+ HTML, CSS & JavaScript Projects With Source Code
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML , CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
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'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
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
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
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!
