RGBCube/rgbcube.github.io
1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2025-07-26 00:17:45 +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

1
.gitignore vendored
View file

@ -2,6 +2,7 @@
!.gitignore !.gitignore
!*.css
!*.gif !*.gif
!*.html !*.html
!*.js !*.js

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

84
index.html
View file

@ -24,84 +24,12 @@
<meta property="og:url" content="https://rgbcube.github.io/" /> <meta property="og:url" content="https://rgbcube.github.io/" />
<link rel="canonical" href="https://rgbcube.github.io/"> <link rel="canonical" href="https://rgbcube.github.io/">
<link href="/cube.css" rel="stylesheet">
</head> </head>
<body> <body>
<style> <style>
@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;
}
.face::after { .face::after {
z-index: -1; z-index: -1;
content: ""; content: "";
@ -111,7 +39,6 @@
} }
.front { .front {
transform: rotateY(0deg) translateZ(2.5em);
background: linear-gradient(to bottom, cyan, blue); background: linear-gradient(to bottom, cyan, blue);
} }
@ -121,7 +48,6 @@
} }
.top { .top {
transform: rotateX(90deg) translateZ(2.5em);
background: linear-gradient(to bottom, lime, cyan); background: linear-gradient(to bottom, lime, cyan);
} }
@ -131,7 +57,6 @@
} }
.back { .back {
transform: rotateY(180deg) translateZ(2.5em);
background: linear-gradient(to bottom, yellow, red); background: linear-gradient(to bottom, yellow, red);
} }
@ -141,7 +66,6 @@
} }
.bottom { .bottom {
transform: rotateX(-90deg) translateZ(2.5em);
background: linear-gradient(to bottom, blue, black); background: linear-gradient(to bottom, blue, black);
} }
@ -151,7 +75,6 @@
} }
.right { .right {
transform: rotateY(90deg) translateZ(2.5em);
background: linear-gradient(to bottom, white, magenta); background: linear-gradient(to bottom, white, magenta);
} }
@ -161,7 +84,6 @@
} }
.left { .left {
transform: rotateY(-90deg) translateZ(2.5em);
background: linear-gradient(to bottom, lime, black); background: linear-gradient(to bottom, lime, black);
} }
@ -226,4 +148,4 @@
<script src="/cube.js"></script> <script src="/cube.js"></script>
</body> </body>
</html> </html>