前端怎么用vue让图片悬停放大呢?

img


鼠标放在图片上,图片放大,并且可以随着鼠标移动而倾斜悬停,请问用Vue可以怎么做呢

给 图图片或者图片父级 加一个 mouserOver事件 然后 加一个 样式 改变 图片宽高

mouseleave事件 里 宽高 恢复原样
应该还得加个 z-index层级

或者 纯 css 加css3动画

https://blog.csdn.net/mazai5080/article/details/124228506

https://www.jianshu.com/p/5946f13da9e2

https://www.cnblogs.com/gracexin/p/16151831.html


img:hover{
                transform: scale(130%);
            }

最简单的方法,大小自己调整


transform:rotateX/Y/Z(270deg);旋转
transform:scale(2);缩放
transform:translate(-50%,-50%);移动        
transform:skew(45deg);倾斜
transform:matrix();统一简写(旋转 缩放 移动 倾斜)

transform的2D转换和3D转换,参考:https://www.runoob.com/cssref/css3-pr-transform.html