diff --git a/Art/Bravo/flame.gif b/Art/Bravo/flame.gif deleted file mode 100644 index b1d5e69d..00000000 Binary files a/Art/Bravo/flame.gif and /dev/null differ diff --git a/Art/Bravo/index.html b/Art/Bravo/index.html index aec5360f..4a732506 100644 --- a/Art/Bravo/index.html +++ b/Art/Bravo/index.html @@ -3,10 +3,19 @@ - Fire Animation + Rotating 3D Cube -
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/Art/Bravo/rotating-cube.gif b/Art/Bravo/rotating-cube.gif new file mode 100644 index 00000000..4da7b169 Binary files /dev/null and b/Art/Bravo/rotating-cube.gif differ diff --git a/Art/Bravo/style.css b/Art/Bravo/style.css index 5cf88336..d1175529 100644 --- a/Art/Bravo/style.css +++ b/Art/Bravo/style.css @@ -1,22 +1,78 @@ -@keyframes flicker { - 0%, 100% { - opacity: 1; - transform: scale(1); - } - 25% { - opacity: 0.6; - transform: scale(0.95) translateY(-5px); - } - 75% { - opacity: 0.8; - transform: scale(1.05) translateY(5px); - } +.container { + width: 200px; + height: 200px; + perspective: 500px; + margin: 100px; } - .fire { - width: 800px; - height: 500px; - background-image: url('flame.gif'); /* Replace with your fire image URL */ - background-size: cover; - animation: flicker 1s infinite alternate; - } \ No newline at end of file +.cube { + position: relative; + width: 200px; + height: 200px; + transform-style: preserve-3d; + } + +.face { + width: 200px; + height: 200px; + background: white; + border: 2px solid black; + position: absolute; + opacity: 0.8; + display: flex; + align-items: center; + justify-content: center; + font-family: Arial, sans-serif; + font-size: 2rem; + } + +.cube { + position: relative; + width: 200px; + height: 200px; + transform-style: preserve-3d; + transform: rotate3d(1, 1, 0, 45deg); +} + +.front { + background-color: red; + transform: translateZ(100px); +} + +.back { + background-color: blueviolet; + transform: translateZ(-100px) rotateY(180deg); +} + +.left { + background-color: aqua; + transform: translateX(-100px) rotateY(-90deg); +} + +.right { + background-color: blue; + transform: translateX(100px) rotateY(90deg); +} + +.top { + background-color: purple; + transform: translateY(-100px) rotateX(90deg); +} + +.bottom { + background-color: lawngreen; + transform: translateY(100px) rotateX(-90deg); +} + +@keyframes turn { + from { transform: rotate3d(0, 0, 0, 0); } + to { transform: rotate3d(1, 1, 0, 360deg); } +} + +.cube { + position: relative; + width: 200px; + height: 200px; + transform-style: preserve-3d; + animation: turn 5s linear infinite; +} \ No newline at end of file diff --git a/include.js b/include.js index 674dcfc0..cc7d539a 100644 --- a/include.js +++ b/include.js @@ -9470,7 +9470,7 @@ let cards = [ { artName: 'Bravo', pageLink: './Art/Bravo/index.html', - imageLink: './Art/Bravo/flame.gif', + imageLink: './Art/Bravo/rotating-cube.gif', author: 'Cristian Bravo', githubLink: 'https://github.com/Bravo773' }