css中控制图片旋转

CSS中控制图片的旋转非常简单。可以使用transform属性来实现。

img {
    transform: rotate(45deg);
} 

上面的代码将把图像旋转45度。注意，旋转角度需要用单位“度”来指定，并用括号括起来。其中正数表示顺时针旋转，负数表示逆时针旋转。如果想将图片还原到原始状态，可以将角度设置为0。

除了rotate()函数之外，还有其他几个函数可以用来控制图片旋转。其中一个是scale()函数。它可以使图像沿X和Y轴缩放，并可以传递两个参数，分别代表X和Y轴的比例。如果只传递一个参数，则图像将等比例缩放。例如：

img {
    transform: scale(1.5, 0.5);
} 

上面的代码会将图像沿X轴扩展1.5倍，沿Y轴压缩0.5倍。

另一个有用的函数是skew()。它可以使图像沿X和Y轴倾斜，并可以传递两个参数，分别代表X和Y轴的倾斜角度。例如：

img {
    transform: skew(20deg, -10deg);
} 

上面的代码会将图像沿X轴倾斜20度，沿Y轴倾斜-10度。

最后，还有一个函数是matrix()。它可以实现任意2D变换。但是由于它的参数比较复杂，不建议使用。如果需要三维变换，建议使用CSS的3D转换功能。