Hover to filp card

\r\n

Impressive, isn't it?

\r\n

","css":"body{\r\n background:white;\r\n height: 100vh;\r\n display:grid;\r\n place-content:center;\r\n}\r\n.card {\r\n width: 300px;\r\n height: 400px;\r\n perspective: 1000px;\r\n}\r\n\r\n.card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n transition: transform 0.8s;\r\n transform-style: preserve-3d;\r\n}\r\n\r\n.card:hover .card-inner {\r\n transform: rotateY(180deg);\r\n}\r\n\r\n.card-front,\r\n.card-back {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n backface-visibility: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 10px;\r\n padding: 20px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.card-front {\r\n background: linear-gradient(135deg, #ff9a9e, #fad0c4);\r\n color: #fff;\r\n}\r\n\r\n.card-back {\r\n background: linear-gradient(135deg, #667eea, #764ba2);\r\n color: #fff;\r\n transform: rotateY(180deg);\r\n}\r\n\r\n.card-front h2,\r\n.card-back h2 {\r\n font-size: 24px;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.card-back p {\r\n font-size: 16px;\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.1);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n.card {\r\n animation: pulse 2s infinite;\r\n}","js":"// ","user_id":"24c8783e-8cfd-47f1-ac9f-ac9a07eeaa73","project_key":"0tIDt8","description":"Flip Card","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": [], "typescriptActive": true},"tags":["card","hover effect","card hover","card flip","hover","flip effect","css perspective"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":661}],"profiles":{"username":"nuur"}}]