一、旋转
<style> .box { margin: 50px; transform: rotate(-20deg); } .box:hover { /* CSS 默认的单位是像素这里的deg单位不能省略 */ transform: rotate(0deg); } .box>img { width: 250px; border: 1px solid red; padding: 10px; background-color: pink; } </style> </head> <body> <div class="box"> <img src="/images/food.webp" alt=""> </div> </body>
二、缩放
三、倾斜
四、过渡
定义：CSS3过渡是从一种样式逐渐改变为另一种的效果，通过过渡transition，可以实现简单的动画交互效果。
可以过渡的属性：
- 取值为颜色
- 取值为数值
- 阴影
- 背景渐变
- 转换 transform
