{"html":"

Hover Me

Some Additional Information At The Back Side

Face Side

Back Side

","css":".card {\n width: 190px;\n height: 254px;\n position: relative;\n border-radius: 40px;\n transition: all 0.8s;\n perspective: 600px;\n perspective-origin: center bottom;\n}\n\n.upper-part {\n width: 100%;\n height: 65%;\n border-radius: 40px 40px 0 0;\n position: relative;\n transform-style: preserve-3d;\n transition: all 0.9s;\n}\n\n.upper-part-face,\n.upper-part-back {\n text-align: center;\n background-color: lightgray;\n color: purple;\n border: 3px solid purple;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 100%;\n height: 100%;\n padding: 15px;\n border-radius: 40px 40px 0 0;\n font-weight: bold;\n z-index: 2;\n backface-visibility: hidden;\n transition: all 0.6s;\n}\n\n.upper-part-back {\n background-color: purple;\n color: lightgray;\n transform: rotatex(180deg);\n}\n\n.lower-part {\n width: 100%;\n height: 35%;\n border-radius: 0 0 40px 40px;\n position: relative;\n transform-style: preserve-3d;\n transform-origin: center top;\n transition: all 0.9s;\n}\n\n.lower-part-face,\n.lower-part-back {\n background-color: purple;\n width: 100%;\n height: 100%;\n color: lightgray;\n font-weight: bold;\n position: absolute;\n border-radius: 0 0 40px 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: translate(0, -0.8px);\n backface-visibility: hidden;\n z-index: 2;\n}\n\n.lower-part-back {\n backface-visibility: visible;\n border-radius: 40px;\n color: purple;\n background-color: lightgray;\n transform: rotateX(180deg);\n z-index: 1;\n transition: border-radius 0.6s;\n}\n\n.card:hover > .upper-part {\n transform: rotatex(-0.5turn);\n}\n\n.card:hover > .lower-part {\n transform: translateY(88.3px) rotateX(0.5turn);\n}\n\n.card:hover > .lower-part > .lower-part-back {\n border: 3px solid purple;\n border-radius: 0 0 40px 40px;\n}"}

great-snail-48

👁 实时预览

📝 源代码