diff --git a/Art/stormworm9/CubeAnimation/CubeAnimation.gif b/Art/stormworm9/CubeAnimation/CubeAnimation.gif new file mode 100644 index 000000000..b7a875709 Binary files /dev/null and b/Art/stormworm9/CubeAnimation/CubeAnimation.gif differ diff --git a/Art/stormworm9/CubeAnimation/CubeAnimation.html b/Art/stormworm9/CubeAnimation/CubeAnimation.html new file mode 100644 index 000000000..137f3f08d --- /dev/null +++ b/Art/stormworm9/CubeAnimation/CubeAnimation.html @@ -0,0 +1,28 @@ + + + + + + Cube CSS Animation with Bootstrap + + + + +
+
+
+
+
+
Front
+
Back
+
Left
+
Right
+
Top
+
Bottom
+
+
+
+
+
+ + diff --git a/Art/stormworm9/CubeAnimation/style.css b/Art/stormworm9/CubeAnimation/style.css new file mode 100644 index 000000000..1194eab2b --- /dev/null +++ b/Art/stormworm9/CubeAnimation/style.css @@ -0,0 +1,63 @@ +body { + background: #333; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + overflow: hidden; +} + +.scene { + perspective: 1200px; + width: 200px; + height: 200px; + animation: spin 10s linear infinite; +} + +.cube { + width: 200px; + height: 200px; + position: relative; + transform-style: preserve-3d; + animation: rotate 10s linear infinite, change-color 5s infinite alternate; + margin: 0 auto; +} + +.face { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + color: #fff; + background: var(--face-color); +} + +.front { transform: rotateY(0deg) translateZ(100px); } +.back { transform: rotateY(180deg) translateZ(100px); } +.left { transform: rotateY(-90deg) translateZ(100px); } +.right { transform: rotateY(90deg) translateZ(100px); } +.top { transform: rotateX(90deg) translateZ(100px); } +.bottom { transform: rotateX(-90deg) translateZ(100px); } + +@keyframes rotate { + 0% { transform: rotateY(0deg) translateZ(0); } + 100% { transform: rotateY(360deg) translateZ(0); } +} + +@keyframes spin { + 0% { transform: rotate(0deg) translateZ(0); } + 100% { transform: rotate(360deg) translateZ(200px); } +} + +@keyframes change-color { + 0%, 100% { --face-color: #007bff; } + 20% { --face-color: #ff6f61; } + 40% { --face-color: #ffd166; } + 60% { --face-color: #6b4226; } + 80% { --face-color: #50b5e9; } +} \ No newline at end of file diff --git a/include.js b/include.js index 2b7796788..922aa4e22 100644 --- a/include.js +++ b/include.js @@ -1,5 +1,12 @@ let cards = [ - { + { + artName: 'CubeAnimation', + pageLink: './Art/stormworm9/CubeAnimation/CubeAnimation.html', + imageLink: './Art/stormworm9/CubeAnimation/CubeAnimation.gif', + author: 'stormworm9', + githubLink: 'https://github.com/stormworm9 + }, + { artName: 'RingAnimation', pageLink: './Art/stormworm9/RingAnimation/ring.html', imageLink: './Art/stormworm9/RingAnimation/ring.gif',