const translate = [
/*front , bottom, back, top, left, right*/
];
window.onload = load;
function load() {
const section = document.querySelector(".cube");
// console.log(section);
section.addEventListener("click", changeside);
}
function changeside() {
console.log("CLiCK");
rotate();
translate[0] = translate[1];
}
rotate();
function rotate() {
const side = document.getElementsByTagName("DIV");
// console.log(side[0]);
// 0 - front;
translate[0] = "side[" + 0 + "].style.transform:" + "rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewY(" + 45 + "deg) translateY(" + 100 + "px);";
translate[0];
// 1-bottom
translate[1] = "side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg);";
// 2-back
translate[2] =
"side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewY(" + 45 + "deg) translateX(" + 200 + "px) translateY(" + 100 + "px);";
// 3-top
translate[3] = "side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) translateZ(" + 165 + "px);";
// 4 - left
translate[4] =
"side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewX(" + 45 + "deg) translateY(" + 200 + "px) translateX(" + -100 + "px);";
// 5 - right;
translate[5] = "side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewX(" + 45 + "deg) translateX(" + 100 + "px);";
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Square</title>
<link rel="stylesheet" href="square.css" />
</head>
<body>
<article class="container">
<section class="cube">
<div class="front"></div>
<div class="bottom"></div>
<div class="back"></div>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</section>
</article>
</body>
<script src="square.js"></script>
</html>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
body {
background: #dee7fa;
color: #083d77;
font-family: "Noto Sans JP", sans-serif;
font-size: 2.5rem;
font-weight: bold;
text-transform: uppercase;
}
.container {
position: absolute;
top: 50%;
right: 55%;
}
div {
background: #8da9c4;
position: absolute;
border: 3px solid #0b2545;
opacity: 0.4;
min-height: 200px;
min-width: 200px;
}
.front {
transform: rotateX(120deg) rotateZ(45deg) skewY(45deg) translateY(100px);
}
.bottom {
background: #0b2545;
opacity: 0.5;
transform: rotateX(120deg) rotateZ(45deg);
}
.back {
transform: rotateX(120deg) rotateZ(45deg) skewY(45deg) translateX(200px)
translateY(-100px);
}
.top {
transform: rotateX(120deg) rotateZ(45deg) translateZ(165px);
}
.left {
transform: rotateX(120deg) rotateZ(45deg) skewX(45deg) translateY(200px)
translateX(-100px);
}
.right {
transform: rotateX(120deg) rotateZ(45deg) skewX(45deg) translateX(100px);
}