RGBCube/rgbcube.github.io
1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2026-01-17 02:21:03 +00:00
Code Issues Activity Actions

Seperate Cube CSS

Browse source
This commit is contained in:
RGBCube 2023-12-19 13:39:11 +03:00
parent 9a753cb870
commit 685bfae069
No known key found for this signature in database
3 changed files with 101 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

97
cube.css Normal file
View file

@ -0,0 +1,97 @@
@font-face {
font-family: "Bai Jamjuree";
font-weight: 700;
src: url(BaiJamjuree700.woff2) format(woff2);
}
body,
html {
height: 100%;
margin: 0;
}
html {
background-color: #000000;
font-family: "Bai Jamjuree", sans;
font-size: 450%;
}
a {
color: #000000;
text-decoration-line: none;
}
.frame {
background-color: #FFFFFF;
width: min-content;
padding: 0 .3em;
border-radius: 1em;
user-select: none;
}
.frame:hover {
background-color: #FFFF00;
}
.scene {
height: 100%;
width: 100%;
perspective: 15em;
display: flex;
align-items: center;
justify-content: center;
}
.cube {
height: 5em;
width: 5em;
position: relative;
transform: translateZ(-2.5em);
transform-style: preserve-3d;
}
.face {
background-size: cover;
background-position: center;
width: 5em;
height: 5em;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.front {
transform: rotateY(0deg) translateZ(2.5em);
}
.top {
transform: rotateX(90deg) translateZ(2.5em);
}
.back {
transform: rotateY(180deg) translateZ(2.5em);
}
.bottom {
transform: rotateX(-90deg) translateZ(2.5em);
}
.right {
transform: rotateY(90deg) translateZ(2.5em);
}
.left {
transform: rotateY(-90deg) translateZ(2.5em);
}