{"html":"

\n","css":".wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.inner {\n --w: 100px;\n --h: 150px;\n --translateZ: calc((var(--w) + var(--h)) + 0px);\n --rotateX: -15deg;\n --perspective: 1000px;\n position: absolute;\n width: var(--w);\n height: var(--h);\n top: 25%;\n left: calc(50% - (var(--w) / 2) - 2.5px);\n z-index: 2;\n transform-style: preserve-3d;\n transform: perspective(var(--perspective));\n animation: rotating 20s linear infinite; /* */\n}\n@keyframes rotating {\n from {\n transform: perspective(var(--perspective)) rotateX(var(--rotateX))\n rotateY(0);\n }\n to {\n transform: perspective(var(--perspective)) rotateX(var(--rotateX))\n rotateY(1turn);\n }\n}\n\n.card {\n position: absolute;\n border: 2px solid rgba(var(--color-card));\n border-radius: 12px;\n overflow: hidden;\n inset: 0;\n transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))\n translateZ(var(--translateZ));\n}\n\n.img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n background: #0000\n radial-gradient(\n circle,\n rgba(var(--color-card), 0.2) 0%,\n rgba(var(--color-card), 0.6) 80%,\n rgba(var(--color-card), 0.9) 100%\n );\n}\n"}

swift-panda-38

👁 实时预览

📝 源代码