{"loaderData":{"0":null,"0-3":{"total":305,"projects":[{"created":"2024-01-17T07:01:59.000Z","isPrivate":0,"projectId":"c931f9","snapshot":"https://s1.qingting.work/runjs/77d4e5e56f67.png?x-oss-process=style/webp-w-500","tags":null,"title":"CSS cube rotating - RunJS 3D logo","updated":"2024-01-17T13:44:47.000Z","isTemplate":0,"htmlType":"html","pureCSS":1,"htmlLen":240,"cssLen":2360,"jsLen":0,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1100","html":"

\n","css":"* {\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #ececec;\n position: relative;\n perspective: 1000px;\n}\n\n@keyframes view {\n to {\n transform: rotateX(325deg) rotateY(395deg);\n }\n}\n\n.cube-box {\n width: 100px;\n height: 100px;\n transform-style: preserve-3d;\n position: relative;\n transition: all 0.3s;\n transform: rotateX(-35deg) rotateY(35deg);\n animation: view 4s linear infinite;\n}\n\n.surface {\n width: 95%;\n height: 95%;\n opacity: 0.9;\n border-radius: 8%;\n backface-visibility: visible;\n position: absolute;\n}\n.surface.front {\n transform: translateZ(50px);\n background-color: #de0031;\n}\n.surface.back {\n transform: translateZ(-50px);\n background-color: #de0031;\n}\n.surface.left {\n transform: rotateY(90deg) translateZ(-50px);\n background-color: #41b882;\n}\n.surface.right {\n transform: rotateY(90deg) translateZ(50px);\n background-color: #41b882;\n}\n.surface.up {\n transform: rotateX(90deg) translateZ(50px);\n background-color: #60dafa;\n}\n.surface.down {\n transform: rotateX(90deg) translateZ(-50px);\n background-color: #60dafa;\n}\n