[分享]css中怎么将图片翻转

在CSS中，我们可以通过transform属性来实现图片的翻转。具体的实现方法有两种，下面我们来一一讲解。 方法一：利用scale()函数通过scale()函数可以实现图片的缩放。当scaleY(1)...

在CSS中，我们可以通过transform属性来实现图片的翻转。具体的实现方法有两种，下面我们来一一讲解。
方法一：利用scale()函数
通过scale()函数可以实现图片的缩放。当scaleY(-1)时，图片会沿着Y轴翻转。
例如，我们要将一张图片沿着Y轴翻转，代码如下：

img{
	transform: scaleY(-1);
} 

方法二：利用rotate()函数
通过rotate()函数可以实现图片的旋转。当rotateY(180deg)时，图片会沿着Y轴翻转。
例如，我们要将一张图片沿着Y轴翻转，代码如下：

img{
	transform: rotateY(180deg);
} 

值得注意的是，以上代码会将图片整体翻转。如果要只翻转图片的一部分，例如只翻转图片的左半部分，可以使用以下代码：

img{
	transform: perspective(1000px) rotateY(-45deg);
} 

其中perspective的值决定了视角的大小，rotateY的-45deg表示翻转角度，可以根据需要进行修改。
总之，在实现图片翻转的过程中，我们只需要掌握好scale和rotate两个常用的函数，就能够轻松实现各种翻转效果啦！