<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ border: 1px solid red; width: 158px; height: 183px; overflow: hidden; } img{ /*/!*translate/translateX/translateY:在水平、垂直或者两个方向上平移元素*!/ transform: translate(500px,100px); /!*scale/scaleX/scaleY:在水平、垂直或者两个方向上缩放元素*!/ transform: scale(1.5); /!*skew/skewX/skewY:倾斜一定角度*!/ transform: skew(20deg); /!*旋转元素*!/ transform: rotate(90deg);*/ /*过渡效果:指定元素 过渡时间 过渡方式 过渡开始的延迟时间*/ transition: all 1.2s ease 0s; } img:hover{ /*transform: rotateY(180deg);*/ transform: scale(1.8); } </style> </head> <body> <div> <img src="../img/f3_Android1.png" alt="/"> </div> </body> </html>
变形实例
最新推荐文章于 2021-11-25 10:19:39 发布