正文 

当前位置： 首页 > 源码 >

如何在悬停时在 150 毫秒内将元素旋转到 180 度？

     2023-05-08     117

关键词：

【中文标题】如何在悬停时在 150 毫秒内将元素旋转到 180 度？【英文标题】：How do I rotate an element to 180 deg over 150 ms on hover? 【发布时间】：2012-03-15 12:33:33 【问题描述】：

鼠标悬停时，我需要在 150ms 的间隔内将元素逆时针旋转 180˚，然后在鼠标移出时，我需要将元素逆时针旋转回原来的 0˚，间隔 150ms。

我愿意使用 CSS3、jQuery 和 JavaScript。

我使用 Chrome，但我还需要使其适用于 Firefox 和 Safari。不太担心 IE。

【问题讨论】：

为什么是 150 毫秒？只需知道在使用浏览器时间时，您永远不会达到精确的标记，但使用 setTimeout(functionCall(),150) 将是您所需要的。 哪种类型的元素？只有图片？ 只有当你想使用 experimental transform property 和 transition property 时，CSS3 才会发生，这在 Firefox 中有时会有点慢（请注意）。 查看this question 的最高答案，适用于 Chrome、Firefox 和 Safari，但不适用于 IE。 @vol7ron：我选择了 150 作为我可以识别的数字，如果需要，以后可能会更改。 @Julien Bourdon：任意块元素。 div 就可以了。 【参考方案1】：

使用 CSS3 transform、transition 和 Javascript 来添加/删除类。

演示：http://jsfiddle.net/ThinkingStiff/AEeWm/

HTML：

<div id="rotate">hover me</div>

CSS：

#rotate 
    border: 1px solid black;
    height: 100px;
    width: 100px;


.over 
    transform: rotate( -180deg );            
    transition: transform 150ms ease;


.out 
    transform: rotate( -360deg );            
    transition: transform 150ms ease;

​

脚本：

var rotate = document.getElementById( 'rotate' );

rotate.addEventListener( 'mouseover', function () 

    this.className = 'over';

, false );

rotate.addEventListener( 'mouseout', function () 

    var rotate = this;

    rotate.className = 'out';
    window.setTimeout( function ()  rotate.className = '' , 150 );

, false );

​

【讨论】：

别忘了有些浏览器可能仍然需要浏览器前缀（-o、-moz、-ms 和 -webkit） 看起来不错，但我需要它在鼠标移入和移出时旋转相同的方向（逆时针）。 @TestSubject528491 我想如果我先阅读您的问题会有所帮助。更新代码以处理此问题。现在需要一些 javascript。 @TestSubject528491 刚刚纠正了演示中的一个错误。现在可以在 Firefox 中使用。

如何在毫秒内将字符串日期转换为 hive 中的大整数

】如何在毫秒内将字符串日期转换为hive中的大整数【英文标题】：Howtoconvertstringdatetobigintinhivewithmilliseconds【发布时间】：2017-06-2012:36:10【问题描述】：我有一个字符串2013-01-0112:00:01.546，它代表一个毫秒的timestamp，我需要在不丢... 查看详情

CSS动画/过渡旋转标志（步骤）

...将在2秒内再旋转180度接下来的3秒内将一动不动每次鼠标悬停都会变成模糊的形状【问题讨论】：你试过什么？你的代码呢？您好，我们不是来为您编写整个代码的。给 查看详情

JS动画在悬停时旋转

】JS动画在悬停时旋转【英文标题】：JSanimationspinonhover【发布时间】：2016-10-2709:12:49【问题描述】：这是我关于***的第一个问题。想知道是否有人可以向我指出有关使用JS/JQuery动画按钮的解决方案/资源。特别是，我无法理解的... 查看详情

jQuery没有动画不透明度，但会在悬停时旋转元素

】jQuery没有动画不透明度，但会在悬停时旋转元素【英文标题】：jQuerynotanimatingopacitybutwillrotateelementonhover【发布时间】：2013-03-0216:16:35【问题描述】：我一直在寻找为什么我的代码不会在悬停时将元素设置为\'opacity:1\'但会旋转... 查看详情

如何使用css在悬停时在图像上显示图像

】如何使用css在悬停时在图像上显示图像【英文标题】：Howtodisplayimageoverimageonhoverwithcss【发布时间】：2013-08-2402:10:20【问题描述】：我有一个带有links的图片库。编辑：这是我必须使用的代码：<divclass="gallerypagetabs"><ahref="... 查看详情

CSS 动画 - 每次悬停时进一步旋转 45 度

...在每次悬停时再旋转45度。该元素不应在任何时候恢复。如何使用CSS动画实现这一点？我创建了一个fiddle来制作第一个动画，但我无法让它在每次悬停时多旋转45度 查看详情

jQuery Time 鼠标悬停在元素上（悬停）

】jQueryTime鼠标悬停在元素上（悬停）【英文标题】：jQueryTimemouseisoverelement(Hover)【发布时间】：2011-06-0204:16:42【问题描述】：我在几个链接上附加了一个悬停事件，当你越过它时会出现一个框。有没有一种方法可以让悬停事件仅... 查看详情

悬停时启动旋转动画，但悬停时仍会完成

...要的那样工作，但是当鼠标不再在容器内时，旋转停止。如何完成一个完整的旋转，由鼠标悬停启动，即使鼠标离开容器 查看详情

在画布元素中旋转和移动图像？

...会翻转它的x和y速度——所有这些都有效。我只是不知道如何在运动之上进行旋转。我每30毫秒通过window.setInterval调用一次的draw 查看详情

如何仅在鼠标悬停时在树节点的右端显示一个小图标

】如何仅在鼠标悬停时在树节点的右端显示一个小图标【英文标题】：Howtoshowasmallicononrightendofthetreenodeonlyonmouseover【发布时间】：2019-04-0707:59:46【问题描述】：我试图在同一树节点的鼠标悬停时在树节点上显示一个图标。Vue.compo... 查看详情

悬停时在图像上显示标题[重复]

...使用TwitterBootstrap。这是我其中一张图片的HTML。我不知道如何将内容放入其中，以便仅在有人将鼠标悬停在其上时才显示。<divclass="col- 查看详情

如何在加载数据时在 AsyncTask 上实现旋转 ProgressBar？

】如何在加载数据时在AsyncTask上实现旋转ProgressBar？【英文标题】：HowdoIimplementaspinningProgressBaronaAsyncTaskwhilethedataisloading?【发布时间】：2018-06-2500:03:38【问题描述】：假设我有这个代码：XML<FrameLayoutandroid:layout_android:layout_xmlns:a... 查看详情

鼠标悬停时在工具提示中显示全文

】鼠标悬停时在工具提示中显示全文【英文标题】：Showfulltextintooltiponmouseover【发布时间】：2018-06-0201:49:07【问题描述】：我有一个输入，我将长文本绑定到来自AngularJS。我想显示一个省略号，并在mouseover上，在工具提示中显示... 查看详情

css代码如何把背景图旋转

我想把背景图片左旋转或者右旋转，代码应该怎样打（这是原图。）我现在的效果是这样子，有办法可以让它旋转吗1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。2、然后对HTML中的内容定... 查看详情

如何使图像在悬停css上旋转

】如何使图像在悬停css上旋转【英文标题】：Howtomakeimagerotateonhovercss【发布时间】：2017-06-2614:05:35【问题描述】：我想让页面页脚上的社交媒体图标在悬停时旋转。我在每个社交媒体图标上放置了一个标签包装器和单独的标签。... 查看详情

css链接元素在悬停时跳转

】css链接元素在悬停时跳转【英文标题】：csslinkelementjumpsonhover【发布时间】：2011-07-3112:28:18【问题描述】：我试图在悬停时在链接周围放置边框，并且样式适用于它，但是当我将鼠标悬停在它上面时它会跳转（元素跳转）......... 查看详情

如何在悬停时不停止猫头鹰旋转木马？

】如何在悬停时不停止猫头鹰旋转木马？【英文标题】：Hownottostopowlcarouselonhover?【发布时间】：2015-12-2722:25:41【问题描述】：目前，当您将其悬停时，轮播会停止，我添加了autoplayHoverPause:false，但它似乎没有任何改变。是否有... 查看详情

java示例代码_显示旋转180度左右的Android UI元素

java示例代码_显示旋转180度左右的Android UI元素 查看详情