36.悬停时的透视变换 && 交替文字

文章预览

悬停时的透视变换 在元素上应用带有悬停动画的透视变换。 使用 transform 与 perspective() 和 rotateY() 函数为元素创建透视。 使用 transition 在悬停时更新 transform 属性的值。 将 rotateY() 的值改为负数,可以从左到右镜像透视效果。 < div   class = "card-container" >    < div   class = "image-card perspective-left" > div >    < div   class = "image-card perspective-right" > div > div > .image-card  {    display : inline-block;    box-sizing : border-box;    margin :  1rem ;    width :  240px ;    height :  320px ;    padding :  8px ;    border-radius :  1rem ;    background :  url ( "https://picsum.photos/id/1049/240/320" );    box-shadow :  rgba ( 0 ,  0 ,  0 ,  0.25 )  0px   25px   50px  - 12px ; } .perspective-left  {    transform :  perspective ( 1500px )  rotateY ( 15deg );    transition : transform  1s  ease  0s ; } .perspective-left :hover  {    tr ………………………………