turtlemb added his CSS animation art (#2911)

turtlemb · web-flow · commit f56dc3c506a7 · 2025-02-02T09:35:39.000+01:00
diff --git a/Art/turtlemb-ThePrismDiscoveryOfInfrared/index.html b/Art/turtlemb-ThePrismDiscoveryOfInfrared/index.html
@@ -0,0 +1,15 @@
+<head>
+
+  <title>The Prism: Discovery of Infrared</title>
+  <link rel="stylesheet" href="styles.css" >
+
+</head>
+
+<div id="wrap">
+<div id="prism">
+<div id="front">Wilhelm Herschel</div>
+
+<div id="bottom">Temperature</div>
+<div id="back">Infrared</div>
+</div>
+</div>
diff --git a/Art/turtlemb-ThePrismDiscoveryOfInfrared/meta.json b/Art/turtlemb-ThePrismDiscoveryOfInfrared/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "The_Prism_Discovery_Of_Infrared",
+  "githubHandle": "turtlemb"
+}
diff --git a/Art/turtlemb-ThePrismDiscoveryOfInfrared/styles.css b/Art/turtlemb-ThePrismDiscoveryOfInfrared/styles.css
@@ -0,0 +1,48 @@
+#wrap {
+    padding:350px 0 0 800px;
+	-webkit-perspective: 800px;
+	-webkit-perspective-origin: 50% 200px;
+}
+
+#prism {
+    -webkit-transform-style:preserve-3d;
+    width:200px;
+    -webkit-transform:rotateY(-45deg);
+    -webkit-animation:spin 5s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate3d(1,0,0,0deg); }
+    to { -webkit-transform: rotate3d(1,0,0,360deg); }
+}
+
+#prism div {
+    position:absolute;
+    height:200px;
+    background-color:transparent;
+    border: 1px solid blue;
+    color:blue;
+    text-align:center;
+    line-height:200px;
+    font-weight:bold;
+
+    box-shadow: 0px 0px 20px inset;
+}
+
+#front {
+   width:200px;
+   -webkit-transform-origin: 50% 100%;
+   -webkit-transform:translateZ(100px)  rotateX(30deg);
+}
+
+#back {
+  width:200px;
+  -webkit-transform-origin: 50% 100%;
+  -webkit-transform: translateZ(0px) translateY(-175px) rotateY(0deg)  rotateX(150deg)
+}
+
+#bottom {
+  width:200px;
+  -webkit-transform: rotateX(270deg) translateY(100px);
+  -webkit-transform-origin: bottom center;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "The_Prism_Discovery_Of_Infrared",
 +  "githubHandle": "turtlemb"
 +}