在 CSS 中使一张图片旋转并不难,我们使用 transform 属性即可。首先,我们需要一个图片:<img src= image.jpg alt= 我的图片 > 现在,我
在 CSS 中使一张图片旋转并不难,我们使用 transform 属性即可。
首先,我们需要一个图片:
<img src="image.jpg" alt="我的图片">
现在,我们要将这张图片垂直翻转,将它倒过来。
img {
transform: scaleY(-1);
}
这里,我们使用了 scaleY 函数来将图片沿垂直轴翻转,并给函数传递了一个参数 -1,表示翻转角度为 180 度。
如果要将图片水平翻转,也很简单:
img {
transform: scaleX(-1);
}
这里,我们使用了 scaleX 函数来沿水平轴翻转。
如果你想同时水平和垂直翻转图片,也可以这样写:
img {
transform: scaleX(-1) scaleY(-1);
}
这里,我们在 transform 属性中传递了两个函数,分别是 scaleX 和 scaleY,并将它们的参数都设为 -1,这样就可以同时水平和垂直翻转图片了。
除了 scaleX 和 scaleY,CSS 中还有其他的 transform 函数,如 rotate(旋转)、translate(移动)、skew(倾斜)等,读者可以多加尝试。
粉丝
0
关注
0
收藏
0