css中如何图片绕某一点旋转

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的transform属性可以让元素做出各种动画效果,其中包括绕某一点旋转。下面我们就来一起看看如何利用transform来实现这个效果吧。img { /* 设置图片的变换为旋转 */ tran

CSS中的transform属性可以让元素做出各种动画效果,其中包括绕某一点旋转。下面我们就来一起看看如何利用transform来实现这个效果吧。

img {
  /* 设置图片的变换为旋转 */
  transform: rotate(30deg);
  /* 以图片中心为旋转点 */
  transform-origin: center center;
} 

如上代码中,我们可以看到首先将图片的变换设置为旋转,这里以30度为例。然后利用transform-origin属性来设置旋转点为图片的中心点,这样图片就会以中心点为旋转中心进行旋转。

img {
  /* 设置图片的变换为旋转 */
  transform: rotate(30deg);
  /* 以图片左上角为旋转点 */
  transform-origin: left top;
} 

如果想要改变旋转点的位置,只需要改变transform-origin的值就可以了。例如,这里设置旋转点为图片的左上角。

需要注意的是,transform-origin的值是相对于元素本身的,可以使用百分比、像素等单位进行设置。并且,可以通过设置多个transform属性来实现复合变换效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何图片绕某一点旋转

粉丝

0

关注

0

收藏

0

已有0次打赏