29.旋转卡片 & 悬停时图像旋转

文章预览

旋转卡片 创建一个双面卡片,在悬停时旋转。 将卡片的 backface-visibility 设置为 none。 最初,将卡片背面的 rotateY() 设置为 -180deg ,正面设置为 0deg 。 悬停时,将正面的 rotateY() 设置为 180deg ,背面设置为 0deg 。 设置适当的 perspective 值以创建旋转效果。 < div   class = "card" >    < div   class = "card-side front" >      < div > 正面 div >    div >    < div   class = "card-side back" >      < div > 背面 div >    div > div > .card  {    perspective :  150rem ;    position : relative;    height :  40rem ;    max-width :  400px ;    margin :  2rem ;    box-shadow : none;    background : none; } .card-side  {    height :  35rem ;    border-radius :  15px ;    transition : all  0.8s  ease;    backface-visibility : hidden;    position : absolute;    top :  0 ;    left :  0 ;    width :  80% ;    padding :  2rem ;    color : white; } ………………………………