【零基础入门前端系列】—旋转、缩放、倾斜、过渡（二十三）
一、旋转
<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
