投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

CSS3 transform:rotate()制作旋转图片

江山如画 • • 网页制作 • 阅读 4345

在《CSS3 transition transform属性及实例详解》中我们实现了：鼠标放到图片上，图片等比例放大的效果，今天分享transform:rotate()制作旋转图片。

CSS3中的transform:rotate()可以实现旋转功能，可以在CSS里面设定旋转的角度，也可以设定旋转用多少时间来完成。

旋转图片HTML代码

<img src="img/125jz.png" />

CSS代码

img{
    border: #000 solid 2px;
    display: block;
    margin: 50px auto;
    border-radius: 50%;
    transition: all 2.0s;
}
img:hover{
    transform: rotate(360deg);
}

旋转图片演示







CSS3 transform:rotate()制作旋转图片

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3224.html

赞 (2)
江山如画的头像江山如画管理团队
0 1 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2019年1月28日 下午7:59
下一篇 2019年2月12日 下午4:44

99%的人还看了以下文章

发表回复

登录后才能评论

评论列表（1条）

  • 江山如画的头像
    江山如画 2020年1月1日 上午9:18

    鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
    image:hover
    {
    transform：scale（1.4） rotate（360deg）;
    }