diff --git a/Art/MananSharma2710/Cube.gif b/Art/MananSharma2710/Cube.gif new file mode 100644 index 000000000..a821176f5 Binary files /dev/null and b/Art/MananSharma2710/Cube.gif differ diff --git a/Art/MananSharma2710/index.html b/Art/MananSharma2710/index.html new file mode 100644 index 000000000..e144f8cae --- /dev/null +++ b/Art/MananSharma2710/index.html @@ -0,0 +1,19 @@ + + + + + + + 3D Cube Animation + + +
+
+
+
+
+
+
+
+ + diff --git a/Art/MananSharma2710/style.css b/Art/MananSharma2710/style.css new file mode 100644 index 000000000..4b50bd985 --- /dev/null +++ b/Art/MananSharma2710/style.css @@ -0,0 +1,44 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + perspective: 1000px; /* Add 3D perspective */ + background-color: #222; +} + +.cube { + width: 100px; + height: 100px; + position: relative; + transform-style: preserve-3d; /* Enable 3D transformations for children */ + animation: rotate 4s linear infinite; +} + +.face { + width: 100px; + height: 100px; + position: absolute; + border: 1px solid #fff; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; +} + +.front { transform: translateZ(50px); } +.back { transform: translateZ(-50px) rotateY(180deg); } +.top { transform: rotateX(90deg) translateZ(50px); } +.bottom { transform: rotateX(-90deg) translateZ(50px); } +.left { transform: rotateY(-90deg) translateZ(50px); } +.right { transform: rotateY(90deg) translateZ(50px); } + +@keyframes rotate { + 0% { + transform: rotateX(0deg) rotateY(0deg); + } + 100% { + transform: rotateX(360deg) rotateY(360deg); + } +} diff --git a/include.js b/include.js index 2ae741192..d5a1781a9 100644 --- a/include.js +++ b/include.js @@ -175,6 +175,13 @@ let cards = [ author: 'Moccasym', githubLink: 'https://github.com/Moccasym' }, + { + artName: '3D Rotating Cube Animation', + pageLink: './Art/MananSharma2710/index.html', + imageLink: './Art/MananSharma2710/Cube.gif', + author: 'Manan Sharma', + githubLink: 'https://github.com/MananSharma2710' + }, { artName: ' Circular Roller ', pageLink: './Art/himanshumahto/index.html',