From 9c04304acef4a49f802bb68126955678c54d9c32 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 05 Dez 2023 16:15:30 +0100
Subject: [PATCH] add template for CSS 3D Transforms
---
templates/008-css/css-3d-cube.html | 78 +++++++++++++++++++++++++++++++++++++++
1 files changed, 78 insertions(+), 0 deletions(-)
diff --git a/templates/008-css/css-3d-cube.html b/templates/008-css/css-3d-cube.html
new file mode 100644
index 0000000..d31f96a
--- /dev/null
+++ b/templates/008-css/css-3d-cube.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ * {
+ box-sizing: border-box;
+ }
+
+ body {
+ width: 200px;
+ height: 200px;
+
+ perspective: 1000px;
+ }
+
+ .cube {
+ position: relative;
+
+ width: 100%;
+ height: 100%;
+
+ transform-style: preserve-3d;
+
+ transition: transform 1s;
+ }
+
+ .cube div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-size: 25px;
+
+ width: 200px;
+ height: 200px;
+
+ border: 1px solid black;
+
+ backface-visibility: hidden;
+ }
+
+ .top {
+
+ }
+
+ .bottom {
+
+ }
+
+ .left {
+
+ }
+
+ .right {
+
+ }
+
+ .front {
+
+ }
+
+ .back {
+
+ }
+ </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