diff --git a/Art/Abhika3021/Cube.gif b/Art/Abhika3021/Cube.gif new file mode 100644 index 000000000..27507e1a0 Binary files /dev/null and b/Art/Abhika3021/Cube.gif differ diff --git a/Art/Abhika3021/index.html b/Art/Abhika3021/index.html new file mode 100644 index 000000000..0831ec114 --- /dev/null +++ b/Art/Abhika3021/index.html @@ -0,0 +1,18 @@ + + + + + + Rotating 3D Cube + + +
+
+
+
+
+
+
+
+ + diff --git a/Art/Abhika3021/style.css b/Art/Abhika3021/style.css new file mode 100644 index 000000000..ca364c0a2 --- /dev/null +++ b/Art/Abhika3021/style.css @@ -0,0 +1,53 @@ + body { + background-color: #121212; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + perspective: 1200px; + } + + .cube { + width: 100px; + height: 100px; + position: relative; + transform-style: preserve-3d; + animation: rotate 5s linear infinite; + } + + .face { + position: absolute; + width: 100px; + height: 100px; + background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7, #a8d8ea); + opacity: 0.8; + } + + .face:nth-child(1) { + transform: rotateY(0deg) translateZ(50px); + } + .face:nth-child(2) { + transform: rotateY(90deg) translateZ(50px); + } + .face:nth-child(3) { + transform: rotateY(180deg) translateZ(50px); + } + .face:nth-child(4) { + transform: rotateY(-90deg) translateZ(50px); + } + .face:nth-child(5) { + transform: rotateX(90deg) translateZ(50px); + } + .face:nth-child(6) { + transform: rotateX(-90deg) translateZ(50px); + } + + @keyframes rotate { + 0% { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(360deg); + } + } diff --git a/include.js b/include.js index d5a1781a9..b8e6fd262 100644 --- a/include.js +++ b/include.js @@ -2279,6 +2279,13 @@ let cards = [ author: 'psykat1116', githubLink: 'https://github.com/psykat1116' }, + { + artName: 'Rotating 3D Cube', + pageLink: './Art/Abhika3021/index.html', + imageLink: './Art/Abhika3021/Cube.gif', + author: 'Abhika Mittal', + githubLink: 'https://github.com/Abhika3021' + }, { artName: 'Breaking news', pageLink: './Art/parthrc/index.html',