From a9dd06375746b1d038ea0ff713ed3d2ca4f52c2f Mon Sep 17 00:00:00 2001
From: yakshit savaliya <yakshitsavaliya@gmail.com>
Date: Thu, 31 Oct 2024 23:54:35 +0530
Subject: [PATCH] Update index.html

The updated code features smoother transitions, vibrant color animations, and interactive hover effects that elevate the 3D cube's visual appeal and engagement, making it a striking centerpiece for any web design.
---
 3D transform/index.html | 97 ++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 50 deletions(-)
diff --git a/3D transform/index.html b/3D transform/index.html
index 36d7343b..628527b5 100644
--- a/3D transform/index.html	
+++ b/3D transform/index.html	
@@ -1,29 +1,33 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Animated Cube</title>
     <style>
-        body{
+        body {
             background-color: rgb(10, 3, 29);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            overflow: hidden;
         }
+
         /* Container for the 3D cube */
         .cube-container {
-            perspective: 800px; /* Perspective view to create 3D effect */
+            perspective: 800px; /* Perspective view for 3D effect */
             width: 200px;
             height: 200px;
-            display: flex;
-            align-items: center; 
-            justify-content: center;
         }
 
         /* Cube */
         .cube {
             position: relative;
-            margin-left: 1600px;
-            margin-top: 900px;
             width: 100px;
             height: 100px;
             transform-style: preserve-3d; /* Allow child elements to be transformed in 3D space */
-            animation: rotate 5s linear infinite; /* Rotate the cube */
+            animation: rotate 10s linear infinite; /* Rotate the cube */
         }
 
         /* Faces of the cube */
@@ -31,72 +35,64 @@
             position: absolute;
             width: 100px;
             height: 100px;
-            border: 2px solid #3498db;
-            background-color: rgba(52, 152, 219, 0.5);
-            /*make the written part of the face in center and changed color*/
             display: flex; 
             align-items: center; 
             justify-content: center; 
             font-size: 16px; 
             color: white;
             border: 4px solid #f0f3f1;
+            border-radius: 10px;
+            transition: transform 0.5s, background-color 0.5s; /* Smooth transition for hover effects */
         }
 
         /* Front face */
-        .front { transform: translateZ(50px); 
-        animation: colorfront 3s infinite;
+        .front { 
+            transform: translateZ(50px); 
         }
-        @keyframes colorfront {
-            0% { background-color: rgba(220, 13, 13, 0.5); }
-            50% { background-color: rgba(105, 50, 43, 0.5); } 
-            100% { background-color: rgba(149, 11, 130, 0.5); } }
 
         /* Back face */
-        .back { transform: rotateY(180deg) translateZ(50px); 
-        animation: colorback 3s infinite;
+        .back { 
+            transform: rotateY(180deg) translateZ(50px); 
         }
-        @keyframes colorback {
-            0% { background-color: rgba(14, 11, 31, 0.5); }
-            50% { background-color: rgba(178, 200, 37, 0.5); } 
-            100% { background-color: #23ffa080; } }
-
 
         /* Right face */
-        .right { transform: rotateY(90deg) translateZ(50px);
-            animation: colorright 3s infinite; }
-        @keyframes colorright {
-            0% { background-color: rgba(206, 135, 35, 0.5); }
-            50% { background-color: rgba(72, 14, 28, 0.5); } 
-            100% { background-color: #0e1c3180; } }
+        .right { 
+            transform: rotateY(90deg) translateZ(50px); 
+        }
 
         /* Left face */
-        .left { transform: rotateY(-90deg) translateZ(50px);
-            animation: colorleft 3s infinite; }
-        @keyframes colorleft {
-            0% { background-color: rgba(9, 43, 66, 0.5); }
-            50% { background-color: rgba(183, 148, 21, 0.5); } 
-            100% { background-color: #23ffa080; } }
+        .left { 
+            transform: rotateY(-90deg) translateZ(50px); 
+        }
 
         /* Top face */
-        .top { transform: rotateX(90deg) translateZ(50px);
-            animation: colortopt 3s infinite; }
-        @keyframes colortop {
-            0% { background-color: rgba(14, 11, 31, 0.5); }
-            50% { background-color: rgba(178, 200, 37, 0.5); } 
-            100% { background-color: #8189a480; } }
+        .top { 
+            transform: rotateX(90deg) translateZ(50px); 
+        }
 
         /* Bottom face */
-        .bottom { transform: rotateX(-90deg) translateZ(50px); 
-            animation: colorbottom 3s infinite;}
-        @keyframes colorbottom {
-            0% { background-color: rgba(208, 207, 216, 0.5); }
-            50% { background-color: rgba(11, 12, 4, 0.5); } 
-            100% { background-color: #03070580; } }
+        .bottom { 
+            transform: rotateX(-90deg) translateZ(50px); 
+        }
+
+        /* Color animations for the cube faces */
+        .front { background-color: rgba(220, 13, 13, 0.8); }
+        .back { background-color: rgba(14, 11, 31, 0.8); }
+        .right { background-color: rgba(206, 135, 35, 0.8); }
+        .left { background-color: rgba(9, 43, 66, 0.8); }
+        .top { background-color: rgba(14, 11, 31, 0.8); }
+        .bottom { background-color: rgba(208, 207, 216, 0.8); }
 
+        /* Cube rotation animation */
         @keyframes rotate {
-            0% { transform: rotateX(0) rotateY(0);  }
+            0% { transform: rotateX(0) rotateY(0); }
             100% { transform: rotateX(360deg) rotateY(360deg); }
         }
+
+        /* Hover effects to scale faces */
+        .cube-face:hover {
+            transform: scale(1.1);
+        }
     </style>
 </head>
 <body>
@@ -112,3 +108,4 @@
     </div>
 </body>
 </html>
+
