* { padding:0; margin:0; } body { display:flex; justify-content:center; align-items:center; height:100vh; background-image:linear-gradient(200deg,#78f,#f78); perspective:1000px; } .card { position:relative; width:300px; height:450px; border-radius:30px; cursor:pointer; background-color:#fff; box-shadow:1px 1px 20px rgba(0,0,0,0.1); transform-style:preserve-3d; animation:rotate-reverse 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards; } .card:hover { animation:rotate 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards; } .front,.back { display:flex; flex-direction:column; align-items:center; justify-content:space-around; position:absolute; top:0; left:0; width:100%; height:100%; /* 1em = 16px */ font-size:1.3em; border-radius:30px; background-color:#fff; } .back { transform:rotateY(180deg); } @keyframes rotate { 0% { transform:rotateY(0); } 100% { transform:rotateY(180deg); } }@keyframes rotate-reverse { 0% { transform:rotateY(180deg); } 100% { transform:rotateY(0); } }
更新时间:2022-03-14 22:13:42