aboutsummaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css119
1 files changed, 118 insertions, 1 deletions
diff --git a/style.css b/style.css
index 60564f1..b198dcf 100644
--- a/style.css
+++ b/style.css
@@ -8,6 +8,123 @@ body {
img {
max-width: 100%;
height: auto;
- width: auto\9;
+ width: auto;
margin: 8px 0px;
}
+
+/* https://3dtransforms.desandro.com */
+.scene--cube {
+ width: 300px;
+ height: 300px;
+ margin: 80px 0;
+ perspective: 500px;
+}
+
+.scene--persp-cube {
+ perspective: 400px;
+}
+
+.cube {
+ width: 300px;
+ height: 300px;
+ position: relative;
+ transform-style: preserve-3d;
+ transform: translateZ(-150px);
+}
+
+.scene--hero {
+ height: 300px;
+ margin: 80px 0;
+ perspective: 500px;
+ border: none;
+}
+
+.cube--hero {
+ margin: 0 auto;
+}
+
+.cube.is-spinning {
+ animation: spinCube 7s infinite linear;
+}
+
+@keyframes spinCube {
+ 0% {
+ transform: translateZ(-150px) rotateX(0deg) rotateY(0deg);
+ }
+ 100% {
+ transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
+ }
+}
+
+.cube__face {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ border: 2px solid grey;
+ line-height: 300px;
+ font-size: 40px;
+ font-weight: bold;
+ color: white;
+ text-align: center;
+}
+
+.cube.is-backface-hidden .cube__face {
+ backface-visibility: hidden;
+}
+
+.cube__face--front {
+ background: hsla(0, 100%, 50%, 0.7);
+}
+.cube__face--right {
+ background: hsla(60, 100%, 50%, 0.7);
+}
+.cube__face--back {
+ background: hsla(120, 100%, 50%, 0.7);
+}
+.cube__face--left {
+ background: hsla(180, 100%, 50%, 0.7);
+}
+.cube__face--top {
+ background: hsla(240, 100%, 50%, 0.7);
+}
+.cube__face--bottom {
+ background: hsla(300, 100%, 50%, 0.7);
+}
+
+.cube__face--front {
+ transform: rotateY(0deg) translateZ(150px);
+}
+.cube__face--right {
+ transform: rotateY(90deg) translateZ(150px);
+}
+.cube__face--back {
+ transform: rotateY(180deg) translateZ(150px);
+}
+.cube__face--left {
+ transform: rotateY(-90deg) translateZ(150px);
+}
+.cube__face--top {
+ transform: rotateX(90deg) translateZ(150px);
+}
+.cube__face--bottom {
+ transform: rotateX(-90deg) translateZ(150px);
+}
+
+.cube.show-front {
+ transform: translateZ(-150px) rotateY(0deg);
+}
+.cube.show-right {
+ transform: translateZ(-150px) rotateY(-90deg);
+}
+.cube.show-back {
+ transform: translateZ(-150px) rotateY(-180deg);
+}
+.cube.show-left {
+ transform: translateZ(-150px) rotateY(90deg);
+}
+.cube.show-top {
+ transform: translateZ(-150px) rotateX(-90deg);
+}
+.cube.show-bottom {
+ transform: translateZ(-150px) rotateX(90deg);
+}