{"html":"

\n\n

\n","css":".cube {\n --size: 200px;\n transform-style: preserve-3d;\n perspective: 2000px;\n width: var(--size);\n height: var(--size);\n animation: girar 10s linear infinite alternate both;\n\n .side {\n width: var(--size);\n height: var(--size);\n background-color: #ff00ffaa;\n position: absolute;\n zoom: 0.8;\n transition: background-color 0.5s ease;\n\n &:hover {\n &,\n & ~ .side {\n background-color: #0ff8;\n }\n }\n\n .line {\n position: absolute;\n background-color: magenta;\n\n &.vertical-line {\n left: 50%;\n top: 0;\n transform: translate(-50%);\n width: 5%;\n height: 100%;\n }\n\n &.horizontal-line {\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n height: 5%;\n width: 100%;\n }\n }\n\n .circle-center {\n position: absolute;\n width: 50%;\n height: 50%;\n border-radius: 50%;\n background-color: #f0f8ff;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .heart-container {\n position: absolute;\n width: 80%;\n height: 65%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .heart-part {\n position: absolute;\n width: 50%;\n height: 100%;\n border-radius: 4vmax 4vmax 0 0;\n background-color: magenta;\n }\n\n .left {\n left: 0;\n transform-origin: 100% 100%;\n transform: scale(0.9) rotate(45deg);\n }\n\n .right {\n right: 0;\n transform-origin: 0 100%;\n transform: scale(0.9) rotate(-45deg);\n }\n }\n }\n\n .corner,\n .center,\n .top-left-square,\n .center-top,\n .top-right-square,\n .center-right,\n .bottom-right-square,\n .center-bottom,\n .bottom-left-square,\n .center-left {\n position: absolute;\n }\n\n .corner {\n width: 32%;\n height: 32%;\n box-shadow:\n inset 7px 0 0 magenta,\n inset 0 7px 0 0 magenta;\n background-image: radial-gradient(\n circle at 100% 100%,\n transparent 0 25%,\n magenta 26% 36%,\n #f0f8ff 36%\n );\n }\n\n .center {\n background-color: #f0f8ff;\n transform: translateX(-50%);\n width: 18%;\n height: 18%;\n box-shadow: inset 0 7px 0 magenta;\n background-image: radial-gradient(\n ellipse 300% 100% at 50% 100%,\n magenta 0 25%,\n transparent 25%\n );\n }\n\n .top-left-square {\n top: 0;\n left: 0;\n }\n\n .center-top {\n left: 50%;\n }\n\n .top-right-square {\n right: 0;\n top: 0;\n transform: scaleX(-1);\n }\n\n .center-right {\n right: 0;\n top: 50%;\n transform: translateY(-50%) rotate(90deg);\n }\n\n .bottom-right-square {\n right: 0;\n bottom: 0;\n transform: rotate(180deg);\n }\n\n .center-bottom {\n left: 50%;\n bottom: 0;\n transform: translateX(-50%) rotate(180deg);\n }\n\n .bottom-left-square {\n bottom: 0;\n left: 0;\n transform: rotate(-90deg);\n }\n\n .center-left {\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n }\n }\n\n .behind {\n transform: translateZ(calc(-1 * var(--size)));\n }\n\n .right {\n transform-origin: 100% 0;\n transform: rotateY(-90deg);\n }\n\n .left {\n transform-origin: 0 0;\n transform: rotateY(90deg);\n }\n\n .top {\n transform-origin: 50% 0;\n transform: rotateX(-90deg);\n }\n\n .under {\n transform-origin: 50% 100%;\n transform: rotateX(90deg);\n }\n}\n\n.cube-viewport {\n --w: 100dvmax;\n --h: 100%;\n width: var(--w);\n height: var(--h);\n transform-style: preserve-3d;\n perspective: 2000px;\n position: absolute;\n\n .side {\n position: absolute;\n width: var(--w);\n height: var(--h);\n background: repeating-linear-gradient(\n to bottom,\n transparent 1% 9%,\n #000 9% 10%\n ),\n repeating-linear-gradient(to right, transparent 1% 9%, #000 9% 10%);\n }\n\n .front {\n background-color: transparent;\n background-image: none;\n }\n\n .behind {\n background-color: #0ff8;\n transform: translateZ(calc(-1 * var(--w)));\n }\n\n .right {\n background-color: #0ff8;\n transform-origin: 100% 0;\n transform: rotateY(-90deg);\n }\n\n .left {\n background-color: #0ff8;\n transform-origin: 0% 0;\n transform: rotateY(90deg);\n }\n\n .top {\n background-color: #0ff8;\n transform-origin: 50% 0;\n transform: rotateX(-90deg);\n height: 100dvmax;\n }\n\n .bottom {\n background-color: #0ff8;\n transform-origin: 0% 100%;\n width: 100dvmax;\n height: 100dvmax;\n transform: rotateX(90deg);\n bottom: 0;\n }\n}\n\n@keyframes girar {\n 0% {\n transform: rotateX(-25deg) rotateY(-25deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-25deg) rotateY(25deg) rotateZ(360deg);\n }\n}\n"}

empty-robin-92

👁 实时预览

📝 源代码