Skip to content

Update index.html #712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update index.html #712

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 47 additions & 50 deletions 3D transform/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,98 @@
<!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 */
.cube-face {
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>
Expand All @@ -112,3 +108,4 @@
</div>
</body>
</html>