From e6d3bfab9e5a61da5aef181894bf74276b0724d0 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 11 Dez 2023 15:53:32 +0100
Subject: [PATCH] Merge branch 'draft'
---
assets/html/css-transform-3d-cube.html | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/assets/html/css-transform-3d-cube.html b/assets/html/css-transform-3d-cube.html
new file mode 100644
index 0000000..a9df48a
--- /dev/null
+++ b/assets/html/css-transform-3d-cube.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ * {
+ box-sizing: border-box;
+ }
+
+ body {
+ margin: 0 auto;
+
+ width: 100px;
+ height: 100px;
+
+ perspective: 5000px;
+ }
+
+ .cube {
+ position: relative;
+
+ width: 100%;
+ height: 100%;
+
+ transform-style: preserve-3d;
+
+ transition: transform 1s;
+
+ animation-name: spin;
+ animation-duration: 3s;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotateY(0deg);
+ }
+
+ 100% {
+ transform: rotateY(360deg);
+ }
+ }
+
+ .cube div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-size: 25px;
+
+ width: 100px;
+ height: 100px;
+
+ position: absolute;
+
+ border: 1px solid white;
+
+ backface-visibility: hidden;
+
+ color: white;
+ }
+
+ .top {
+ transform: rotateX(90deg) translateZ(50px);
+ }
+
+ .bottom {
+ transform: rotateX(-90deg) translateZ(50px);
+ }
+
+ .left {
+ transform: rotateY(-90deg) translateZ(50px);
+ }
+
+ .right {
+ transform: rotateY(90deg) translateZ(50px);
+ }
+
+ .front {
+ transform: rotateY(0deg) translateZ(50px);
+ }
+
+ .back {
+ transform: rotateY(180deg) translateZ(50px);
+ }
+
+
+ </style>
+ </head>
+ <body>
+ <div class="cube">
+ <div class="front">3</div>
+ <div class="back">4</div>
+ <div class="right">5</div>
+ <div class="left">2</div>
+ <div class="top">1</div>
+ <div class="bottom">6</div>
+ </div>
+ </body>
+</html>
--
Gitblit v1.9.3