CSS 中鼠标悬停图片旋转

w3school 中 transfrom 说明

主要使用的属性就是 transfrom

第一种情况

1.1 说明当鼠标放到图片上之后图片旋转, 这里的图片给的是背景图
1.2 代码说明:

transform: rotate(angle) 指定元素的 2D 旋转
transition: all 0.6s 设定旋转的动画时间

<div class="UserImg-box"><div class="img" :style="{backgroundImage: `url(${user_img})`}"></div>
</div>

.UserImg-box {margin: 0 auto;width: 120px;height: 120px;text-align: center;
}
.UserImg-box:hover .img{transform: rotate(-360deg);
}
.img {width: 100%;height: 100%;border-radius: 50%;background-size: cover;background-position: 50%;transition: all 0.6s;
}

第二种情况

和第一种情况的区别在于这种情况可以指定旋转的圆心

2.1 代码说明

transform-origin: 90% 40%; 设定旋转的圆心

.UserImg-box {margin: 0 auto;width: 120px;height: 120px;text-align: center;&:hover {.img {transform: rotate(-120deg);}}.img {width: 100%;height: 100%;border-radius: 50%;background-size: cover;background-position: 50%;transition: all 0.3s;transform-origin: 90% 40%;}
}

CSS 中鼠标悬停图片旋转相关推荐

CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
html中鼠标悬停图片变大,JavaScript通过mouseover()实现图片变大效果的示例
图片提示 body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#55 ...
CSS鼠标悬停图片上图片变灰变色半透明
CSS鼠标悬停图片上图片变灰变色半透明 DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰.图片变色.图片半透明一.DIVCSS5介绍与说明: - ...
CSS滤镜实现鼠标悬停图片变黑白(灰色)
文章目录前言一.思路分析 1.样式代码二.具体实现 1.全部源码 2.效果结语前言这几天在清理电脑文件夹,发现了N年前的一些小demo,顺手记录一下,都是一些比较简单的案例,话不多说了 ...
rp原型中鼠标悬停显示图片_悬停状态原型4种方式
rp原型中鼠标悬停显示图片 There are tons of options available for UX designers to prototype a user experience an ...
背景图片用css能隐藏吗,用css实现鼠标悬停时隐藏背景图片的问题
用css实现鼠标悬停在导航文字连接上时隐藏导航的背景图片为什么我的鼠标悬停在导航上时,背景图片还在啊? css代码如下: body{ margin:0; padding:0; background: ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
css鼠标悬停图片剪辑路径效果
下载地址一款css鼠标悬停图片剪辑路径效果,当鼠标悬停在图片上时,图片按一定路径放大的动画特效,生动形象,让图片灵活起来. dd:
css 菜单栏悬停_在CSS中构建悬停菜单
css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...

CSS 中鼠标悬停图片旋转

CSS 中鼠标悬停图片旋转

w3school 中 transfrom 说明

CSS 中鼠标悬停图片旋转相关推荐

最新文章

热门文章

CSS 中鼠标悬停 图片旋转

CSS 中鼠标悬停 图片旋转

w3school 中 transfrom 说明

CSS 中鼠标悬停 图片旋转相关推荐

最新文章

热门文章

CSS 中鼠标悬停图片旋转

CSS 中鼠标悬停图片旋转

CSS 中鼠标悬停图片旋转相关推荐