HOW TO MAKE ROTATION RUBIK CUBE
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="scene rotateY">
<div class="cube">
<div class="grid-container front">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container back">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container left">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container top">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container bottom">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="scene rotateX">
<div class="cube">
<div class="grid-container front">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container back">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container left">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container top">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="grid-container bottom">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--width-cube: 200px;
--opac: 0.7;
}
html, body {
height: 100%;
background: #29303b;
display: flex;
align-items: center;
justify-content: center;
}
.cube{
width: var(--width-cube);
height: var(--width-cube);
}
.grid-container{
position: absolute;
width: var(--width-cube);
height: var(--width-cube);
display: grid;
grid-template-areas: "1 2 3";
grid-gap: 0px;
padding: 0px;
}
.grid-container>span{
border: 3px solid rgb(230,230,230);
}
.front{
background: #fa5252;
opacity: var(--opac);
transform: translateX(calc(var(--width-cube)/-2)) translateY(calc(var(--width-cube)/-2)) translateZ(calc(var(--width-cube)/-2));
}
.back{
background: #f76707;
opacity: var(--opac);
transform: translateX(calc(var(--width-cube)/-2)) translateY(calc(var(--width-cube)/-2)) translateZ(calc(var(--width-cube) / 2));
}
.right{
background: #12b886;
opacity: var(--opac);
transform: translateY(calc(var(--width-cube)/-2)) rotateY(90deg);
}
.left{
background: #4c6ef5;
opacity: var(--opac);
transform: translateY(calc(var(--width-cube)/-2)) translateX(calc(var(--width-cube)/-1)) rotateY(90deg);
}
.top{
background: #fab005;
opacity: var(--opac);
transform: translateX(calc(var(--width-cube)/-2)) translateY(calc(var(--width-cube)/-1)) rotateX(90deg);
}
.bottom{
background: #7950f2;
opacity: var(--opac);
transform: translateX(calc(var(--width-cube)/-2)) rotateX(90deg);
}
.rotateY .cube{
transform-style: preserve-3d;
transform-origin: 0% 0%;
transform: rotateX(-27deg) rotateY(51deg);
animation: rotate1 6s linear infinite;
}
.rotateX .cube{
margin-left: 300px;
transform-style: preserve-3d;
transform-origin: 0% 0%;
transform: rotateX(-27deg) rotateY(51deg);
animation: rotate2 6s linear infinite;
}
@keyframes rotate1{
0%{
transform: rotateX(-27deg) rotateY(51deg);
}
11%{
transform: rotateX(-27deg) rotateY(-39deg);
}
22%{
transform: rotateX(-27deg) rotateY(-39deg);
}
33%{
transform: rotateX(-27deg) rotateY(-129deg);
}
44%{
transform: rotateX(-27deg) rotateY(-129deg);
}
55%{
transform: rotateX(-27deg) rotateY(-219deg);
}
66%{
transform: rotateX(-27deg) rotateY(-219deg);
}
77%{
transform: rotateX(-27deg) rotateY(-309deg);
}
88%{
transform: rotateX(-27deg) rotateY(-309deg);
}
100%{
transform: rotateX(-27deg) rotateY(-309deg);
}
}
@keyframes rotate2{
0%{
transform:rotateX(-27deg) rotateY(131deg) rotateZ(0deg);
}
11%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-90deg);
}
22%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-90deg);
}
33%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-180deg);
}
44%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-180deg);
}
55%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-216deg);
}
66%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-270deg);
}
77%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-270deg);
}
88%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-360deg);
}
100%{
transform: rotateX(-27deg) rotateY(131deg) rotateZ(-360deg);
}
}
posted by Alep mustaqim ariffin mahidi @ November 09, 2021
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home