[{"id":168,"created_at":"2024-01-06T06:53:25.089352+00:00","html":"

\r\n

Front

\r\n

Right

\r\n

Back

\r\n

Left

\r\n

Top

\r\n

Bottom

\r\n

","css":".cube-container {\r\n perspective: 800px;\r\n width: 200px;\r\n height: 200px;\r\n margin: 100px auto;\r\n}\r\n\r\n.cube {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n transform-style: preserve-3d;\r\n transform: rotateX(-30deg) rotateY(-45deg);\r\n animation: rotateCube 5s infinite linear;\r\n}\r\n\r\n.face {\r\n position: absolute;\r\n width: 200px;\r\n height: 200px;\r\n line-height: 200px;\r\n text-align: center;\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: white;\r\n}\r\n\r\n.face:nth-child(1) {\r\n background-color: #3498db;\r\n transform: rotateY(0deg) translateZ(100px);\r\n}\r\n\r\n.face:nth-child(2) {\r\n background-color: #2ecc71;\r\n transform: rotateY(90deg) translateZ(100px);\r\n}\r\n\r\n.face:nth-child(3) {\r\n background-color: #e74c3c;\r\n transform: rotateY(180deg) translateZ(100px);\r\n}\r\n\r\n.face:nth-child(4) {\r\n background-color: #f39c12;\r\n transform: rotateY(-90deg) translateZ(100px);\r\n}\r\n\r\n.face:nth-child(5) {\r\n background-color: #9b59b6;\r\n transform: rotateX(90deg) translateZ(100px);\r\n}\r\n\r\n.face:nth-child(6) {\r\n background-color: #34495e;\r\n transform: rotateX(-90deg) translateZ(100px);\r\n}\r\n\r\n@keyframes rotateCube {\r\n from {\r\n transform: rotateX(-30deg) rotateY(-45deg);\r\n }\r\n\r\n to {\r\n transform: rotateX(-30deg) rotateY(315deg);\r\n }\r\n}","js":"","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"HQ8vHq","description":"Rotating Cube: CSS Only","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["css","cube","card","animation","3d animation","css only","css trick","html"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":507}],"profiles":{"username":"devcanvas"}}]