悬停时旋转或旋转图像

2023-11-23

我想了解如何制作旋转或旋转图像当它悬停时。我想知道如何模拟该功能CSS关于以下代码:

img {
  border-radius: 50%;
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />

您可以使用 CSS3 过渡rotate() to 悬停时旋转图像.

旋转图像:

img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}
<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

这是一个小提琴DEMO


更多信息和参考:

  • 有关 CSS 过渡的指南MDN
  • 关于 CSS 转换的指南MDN
  • 二维变换的浏览器支持表caniuse.com
  • 转换的浏览器支持表caniuse.com
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

悬停时旋转或旋转图像 的相关文章

  • rgb() 和 rgba() 不透明度有什么区别?

    我发现另一个关于 rgb 与 rgba 的问题非常相似 但它缺少关于使用的答案RGB 不透明度 我知道两者之间的区别 rgba 只是 rgb 但带有 alpha 不透明度 问题是 我使用带有不透明度值的 RGB 已经有几个月甚至几年了 它一
  • jQuery / CSS3 动画阴影效果

    所以这个问题可能会被否决 但我认为有人可能会提供帮助 我正在寻找的效果是蓝色块像气球一样上下盘旋 当块上 下移动时 阴影在其下方不断增大和缩小 关于如何编程的任何想法 或者有人知道可以完成的教程 插件吗 你可以使用 jQuery 来完成 或
  • 如何让浮动的div对齐到顶部?

    下面的代码可以在这个小提琴中查看 http jsfiddle net VgG55 10 http jsfiddle net VgG55 10 我有以下标记 其中 div 按以下顺序放置 div class wrapper div class
  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled
  • 当通过 javascript 填充输入框时,使物化标签移出输入框

    通常情况下 与物化 http materializecss com 文本输入框的标签显示在输入框中 直到用户选择该框并在其中输入文本 但是 当通过 javascript 填充框的值时 标签不会移开 它保留在框中并与输入的文本重叠 有没有办法
  • 项目之间的点线

    我正在建立一个餐厅网站和菜单 我需要在菜单项和价格之间画一条 点线 我需要得到它 而不需要手动一一写点 此功能应该自动工作 是否可以使用 span 或 div 等背景来创建它 我拥有的 我想要的是 我想你正在寻找这样的东西 html div
  • 如何更改引导弹出窗口箭头边框颜色而不填充它?

    我想更改弹出箭头的边框颜色 当我应用边框颜色时 箭头本身填充了颜色 我只想为弹出框主体的箭头边框提供颜色 p Click on button to see Popover p a href class btn btn primary pop
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 按钮轮廓大于按钮尺寸

    我试图制作一个带有 3 个点的按钮 虽然它带来了奇怪的问题 当你点击它时 你会注意到在焦点模式下有一座奇怪的 山 button letter spacing 2px padding top 4em padding bottom 8em li
  • 在CSS中,有什么比使其成为块元素更好的强制元素换行的方法呢?

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color
  • 使用百分比 (%) 时如何计算填充?

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA
  • css如何让文本底部对齐?

    怎么做怎么做 a 文字底部对齐吗 我已经添加了height line height and vertical align bottom 但文本仍然在 div 的中间 怎么做 谢谢 Test in http jsfiddle net BanA
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • 确定使用 -webkit-line-clamp 表示多行省略号时是否显示省略号

    我们使用多行 CSS 省略号https css tricks com line clampin https css tricks com line clampin 我们想要检测省略号是否正在显示 并根据省略号是否正在显示来决定显示工具提示
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • 悬停在“除了”之外的所有内容上,即“聚光灯”效果:如何进行平滑且轻松的悬停过渡?

    Chris Coyier 曾在 CSS Tricks 网站上发表过一篇文章介绍如何实现这种效果 ul hover li not hover opacity 5 但我还试图实现平滑且轻松的悬停过渡 我只是不确定如何或在哪里插入代码的 平滑悬停
  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐

  • 调试 R 中未由包导出的函数

    我想逐步使用debug or trace 未导出的函数 例如 我该如何做vcov polr包装的MASS 从函数中调用polr polr已导出 但 vcov polr 未导出 也就是说 当我跑步时polr 我希望调试浏览器在代码输入后启动v
  • 生成低位深度的图像文件?

    bpp 每像素位数 因此 32bpp 意味着 R G B A 为 8 8 8 8 就像 NET 有一个枚举 System Drawing Imaging PixelFormat 现在一旦我有一个Bitmap or Image对象与我的图形
  • 如何在WPF中绑定逆布尔属性?

    我所拥有的是一个具有IsReadOnly财产 如果这个属性为真 我想设置IsEnabledButton 上的属性 例如 设置为 false 我愿意相信我可以像IsEnabled Binding Path IsReadOnly 但这不适用于
  • NodeJS readdir 并需要相对路径

    假设我有这个目录结构 Project node modules SomeModule bar js config file json foo js foo js require bar bar js fs readdir config re
  • 清单合并失败错误

    我正在将当前项目的大型应用程序迁移到 Android Studio 和 Gradle 中 我目前陷入以下问题 Error 87 9 Execution failed for task App processDebugManifest gt
  • pip:根据包名称选择索引url?

    我创建了一个本地私有包存储库 按照惯例 所有这些包都以识别前缀命名 例如 foo package 这些包可能依赖于 PyPi 上可用的公共包 我们假设 PyPi 中不存在同名包的风险 通过使用 index url和 一起 extra ind
  • Java 代码未正确更新

    这可能看起来很奇怪 我用 Java 编写了代码 在 Eclipse 中 然后 我对代码做了一些修改 现在 我尝试运行新代码 修改后 但它仍然为我提供之前代码的输出 我在代码中放置了几个调试点 但它跳过了一些调试点 尽管它应该在它们处停止 并
  • 如何将 RFC-1123 日期时间格式化程序转换为本地时间

    我正在获取日期时间Thu 25 Aug 2016 08 59 00 GMT在这个RFC 1123在我的 Android 应用程序中格式化 我需要转换为当地时间 DateTimeFormatter RFC 1123 DATE TIME jav
  • 从 sockaddr * 转换为 sockaddr_in * 增加了所需的对齐方式

    当我使用一些看起来像这样的代码时 编译器会产生此警告 for p res p NULL p p gt ai next void addr std string ipVer IPv0 if p gt ai family AF INET ipV
  • 关于 Rails 中的演示者模式。有更好的方法吗?

    我的模型中有 def presenter presenter ProfilePresenter new self presenter end ProfilePresenter 是一个类 它具有 get link get img url si
  • Mysql - “选择类似”不使用索引

    我一直在研究MySQL 5 5 24 WinXP 上的索引 但我找不到服务器在运行时不使用一个索引的原因 LIKE用来 例子是这样的 我创建了一个测试表 create table testTable id varchar 50 primar
  • POST 响应的 TIdHTTP 字符编码

    采取以下情况 procedure Test var Response String begin Response IdHttp Post MyUrL AStream DoSomethingWith Response end 现在网络服务器以
  • 线程池中的活动线程数

    当我编写下面的代码时 为什么我得到的可用线程号是 1022 1020 因为我正在使用线程池 所以我必须获得最多 25 个线程 我猜输出线程数是系统上的可用线程 我需要在 win 表单应用程序中获取线程池中的可用线程号 private voi
  • 将特殊字符转换为 HTML 字符代码

    我正在为客户开发 CMS 他需要编辑内容并使用特殊字符 例如 and 但是 我不希望他必须输入字符代码 例如 reg 有谁知道使用 PHP 自动转换这些字符的好方法吗 您可以使用 htmlentities 来做到这一点 php r echo
  • 将 Angular 应用程序部署在与根文件夹不同的文件夹中

    刚接触 Angular 如果部署在应用程序工作正常nginx var www mydomain com html 但我想将其部署在 var www mydomain com html myapp文件夹 我设置nginx available
  • 是否有 JavaScript / jQuery DOM 更改侦听器?

    本质上我想让一个脚本在 a 的内容被执行时执行DIV改变 由于脚本是分开的 Chrome 扩展程序中的内容脚本和网页脚本 我需要一种简单观察 DOM 状态变化的方法 我可以设置投票 但这看起来很草率 长期以来 DOM3 突变事件是最佳可用解
  • 如何使用 Xcode 4.2 区分多个目标

    我开发了一个应用程序的精简版 现在我想创建一个付费版本 所以我复制了目标 更改了它的名称 因此更改了 plist 和其他具有该名称的内容 现在我必须在代码中进行区分 我正在使用 Xcode 4 2 我在网上看到我必须创建一个预处理器标志 我
  • 如何在 Flutter 中进行交互式通知 [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 I am making a music player app in Flutter and I am not able to find any way to make a wid
  • 使用 jQuery 在 Dom Load 上自动播放 HTML5 视频

    我正在尝试使用 jQuery 在 dom 加载后立即播放视频 这是我的代码 HTML
  • 悬停时旋转或旋转图像

    我想了解如何制作旋转或旋转图像当它悬停时 我想知道如何模拟该功能CSS关于以下代码 img border radius 50 img src http i imgur com 3DWAbmN jpg 您可以使用 CSS3 过渡rotate