{"html":"

\n","css":"@keyframes hue-rotate {\n to {\n filter: hue-rotate(360deg);\n }\n}\n\n.container {\n --w: 35px;\n --g: 5px;\n --t: calc(var(--w) + var(--g));\n width: var(--w);\n aspect-ratio: 1;\n perspective: 120px;\n transform-style: preserve-3d;\n}\n\n.cube {\n --fz: 0;\n --rx: 0;\n --fx: 0;\n --ry: 0;\n --fy: 0;\n position: absolute;\n background: #fffc;\n border: 2px solid black;\n width: var(--w);\n aspect-ratio: 1;\n bottom: calc(var(--w) * -0.5);\n right: calc(var(--w) * -0.5);\n animation:\n rotate 20s linear infinite,\n hue-rotate 20s linear infinite;\n transition: 5s;\n --a: translateZ(calc(0.5 * var(--w)))\n translateX(calc(var(--x) * var(--t) - 0.5 * var(--fy) * var(--w)))\n translateY(calc(var(--y) * var(--t) - 0.5 * var(--fx) * var(--w)))\n translateZ(\n calc(\n var(--z) * var(--t) - 0.5 * var(--ry) * var(--w) - 0.5 * var(--rx) *\n var(--w) - var(--fz) * var(--w)\n )\n )\n rotateX(calc(90deg * var(--rx))) rotateY(calc(90deg * var(--ry)));\n --p: translateX(calc(-0.5 * var(--w))) translateY(calc(-0.5 * var(--w)))\n translateZ(calc(-0.5 * var(--w)));\n}\n\n.cube:hover {\n background: #f00e;\n transition: 0s;\n}\n\n@keyframes rotate {\n 0% {\n transform: var(--p) rotateZ(0deg) rotateY(0deg) rotateX(0deg) var(--a);\n }\n to {\n transform: var(--p) rotateZ(360deg) rotateY(720deg) rotateX(360deg) var(--a);\n }\n}\n"}

polite-dingo-53

👁 实时预览

📝 源代码