{"html":"

Card Header

Click me

Card Header

Click me

Card Header

Click me

","css":".cards {\n position: relative;\n}\n\n.card {\n z-index: 1;\n position: absolute;\n width: 254px;\n height: 190px;\n border-radius: 10px;\n transition: all .5s ease-out;\n overflow: hidden;\n transform: translateX(0px) translateY(0px) perspective(905px) rotateX(0deg) rotateY(0deg) rotateZ(-8deg);\n}\n\n.card.one {\n top: -120px;\n left: -150px;\n background: linear-gradient(180deg, #FF0055 0%, #000066 100%);\n}\n\n.card.two {\n top: -95px;\n left: -125px;\n background: linear-gradient(180deg, #fa00ff 0%, #01f998 99%);\n}\n\n.card.three {\n top: -70px;\n left: -100px;\n background: linear-gradient(180deg, #c0f901 0%, #fa00ff 100%);\n}\n\n.card:hover {\n z-index: 4;\n transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;\n transition: all .5s ease-out;\n}\n\n.cardDetails {\n width: 55%;\n height: 100%;\n padding: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n background: rgba(0,0,0,0.8);\n transition: .5s;\n transform-origin: left;\n transform: perspective(2000px) rotateY(-90deg);\n}\n\n.card:hover .cardDetails {\n transform: perspective(2000px) rotateY(0deg);\n}\n\n.cardDetailsHaeder {\n font-weight: 600;\n color: #edb899;\n}\n\n.cardDetailsButton {\n padding: 3px 6px;\n border-radius: 25px;\n background-color: #edb899;\n color: #000;\n font-weight: 600;\n}"}

wet-treefrog-28

👁 实时预览

📝 源代码