diff --git a/Art/ManishM/3dcube.gif b/Art/ManishM/3dcube.gif new file mode 100644 index 000000000..b3ab519de Binary files /dev/null and b/Art/ManishM/3dcube.gif differ diff --git a/Art/ManishM/index.css b/Art/ManishM/index.css new file mode 100644 index 000000000..976c42a75 --- /dev/null +++ b/Art/ManishM/index.css @@ -0,0 +1,43 @@ + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + perspective: 1000px; + background-color: #f0f0f0; +} + +.cube { + position: relative; + transform-style: preserve-3d; + animation: spinAndChangeColor 10s linear infinite, changeCubeColor 10s ease-in-out infinite; +} + +.surface { + position: absolute; + width: 200px; + height: 200px; + background: transparent; + border: 2px solid #fff; +} + +.surface:nth-child(1) { transform: rotateY(0deg) translateZ(100px); background-color: #3498db; } +.surface:nth-child(2) { transform: rotateY(90deg) translateZ(100px); background-color: #e74c3c; } +.surface:nth-child(3) { transform: rotateY(180deg) translateZ(100px); background-color: #2ecc71; } +.surface:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); background-color: #f1c40f; } +.surface:nth-child(5) { transform: rotateX(90deg) translateZ(100px); background-color: #9b59b6; } +.surface:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); background-color: #34495e; } + +@keyframes spinAndChangeColor { + 0% { transform: rotateX(0deg) rotateY(0deg); } + 100% { transform: rotateX(360deg) rotateY(360deg); } +} + +@keyframes changeCubeColor { + 0%, 100% { background-color: #3498db; } + 25% { background-color: #e74c3c; } + 50% { background-color: #2ecc71; } + 75% { background-color: #f1c40f; } +} \ No newline at end of file diff --git a/Art/ManishM/index.html b/Art/ManishM/index.html new file mode 100644 index 000000000..d8e8e393f --- /dev/null +++ b/Art/ManishM/index.html @@ -0,0 +1,20 @@ + + + + + + + + +
+
+
+
+
+
+
+
+ + + +! diff --git a/include.js b/include.js index 9cd214747..20bd7d97e 100644 --- a/include.js +++ b/include.js @@ -6513,6 +6513,13 @@ let cards = [ author: 'cpk3', githubLink: 'https://github.com/cpk3' }, + { + artName: '3D spinning cube', + pageLink: './Art/ManishM/index.html', + imageLink: './Art/ManishM/3dcube.gif', + author: 'Manish Mandal', + githubLink: 'https://github.com/manishdevelops' + }, { pageLink: '.Art/yashraj2003e/index.html', imageLink: '.Art/yashraj20033/animation.gif',