{"html":"

\n \n \n \n

\n","css":".container {\n --size: 200px;\n --zoom: 0.5;\n --color-1: #0ff8;\n --color-2: #0f08;\n --color-3: #00f8;\n --color-4: #f008;\n width: var(--size);\n height: var(--size);\n top: 50%;\n left: 50%;\n animation: spinAround 10s linear infinite alternate both;\n zoom: var(--zoom);\n\n &:hover {\n --color-4: #0ff8;\n --color-1: #0f08;\n --color-2: #00f8;\n --color-3: #f008;\n }\n\n &,\n .rectangle,\n .side,\n .block {\n position: absolute;\n transform-style: preserve-3d;\n perspective: 10000px;\n }\n\n .block {\n width: 100%;\n height: 100%;\n\n &.second-block {\n bottom: 50%;\n left: -60px;\n transform: rotate(90deg);\n }\n\n &.third-block {\n bottom: -40px;\n transform: rotateX(-90deg) translateY(200px);\n }\n\n .rectangle {\n width: 100%;\n height: 40px;\n\n .side {\n width: 100%;\n height: 100%;\n\n &:nth-child(1) {\n background-color: var(--color-1);\n transform: rotateX(0deg);\n }\n &:nth-child(2) {\n background-color: var(--color-2);\n transform: rotateX(0deg) translateZ(-40px);\n }\n\n &:nth-child(3) {\n background-color: var(--color-3);\n transform-origin: 50% 0;\n transform: rotateX(-90deg);\n }\n\n &:nth-child(4) {\n background-color: var(--color-4);\n transform-origin: 50% 100%;\n transform: rotateX(90deg);\n }\n }\n }\n\n .rectangle-1 {\n left: 40px;\n }\n\n .rectangle-2 {\n transform: translateZ(-200px);\n }\n\n .rectangle-3 {\n transform-origin: 100% 0%;\n transform: rotateY(-90deg) translateX(-40px);\n }\n .rectangle-4 {\n left: 40px;\n transform-origin: 0% 0%;\n transform: rotateY(90deg);\n }\n }\n}\n\n@keyframes spinAround {\n 0% {\n transform: translate(-50%, -50%) rotateX(15deg) rotateY(15deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateX(375deg) rotateY(375deg);\n }\n}\n"}

nice-bird-95

👁 实时预览

📝 源代码