为了更好参考，我就贴出源代码，直接保存为HTML文件就可以查看效果了哦 ！DOCTYPE html html head meta charset=#34utf8#34 title搜狗指南 title style type=#34textcss#34 diva width 200px；如果你现在只是写了这个静态的样式，有2中方法，1种是把html5和css3中类似于时钟的做法，网上又很多，自己查一下，第2中方法是做成一个3d效果的，js加上css3中专为3d设计的属性 rotateY，你可以看一下；代码如下，望采纳 lthead ltstyle margin 0padding 0boxsizing borderbox div width 300pxheight 300pxtransition all 2sbackground #3ff divhover transform rotateZ45deg lt；代码如下lt！DOCTYPE html lthtml lthead lttitleCSS3旋转图片lttitle ltstyle demo width 100pxheight 75pxbackgroundcolor yellowborder 1px solid blackmargin20px div2 transform rotate；本篇文章给大家带来的内容是关于css3中如何利用transition实现鼠标悬停的时候div的颜色高度和宽度都改变的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助我们平时在浏览web网页的时候会见到这样一种。

bottom 50pxbackground rgba0， 0， 0， 03transition 1s*过渡效果*boxhoverinbox bottom 0ltstyleltheadltbodyltdiv class=quot；用css3的transform属性就可以将div旋转一m11，m12，m21m22 是控制角度的，lthtml lthead ltmeta；4因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是borderradius50%，看一下效果5接下来就是关键的步骤了，也就是添加动画效果输入以下代码 6来看一下最后的效果，还是不错的。

5当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针6最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转；divdemohover width200pxheight200pxborderradius200pxmozborderradius200pxwebkitborderradius200pxtransformrotate90degwebkittransform rotate90deg*Safari 4+，Google Chrome 1+；css让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失，可以尝试一下代码 xwcms margin 0 autowebkitborderradius 110pxborderradius 110pxwebkittransition webkittransform 02s easeoutmoz；今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能，CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现推荐课程CSS3教程案例分析图片翻转效果的思路先利用position定位将两个。

那么这样的效果是如何实现的其实很简单，要将多个转换应用于单个元素，只需使用空格一个接一个地列出它们例html代码ltdiv id=quotsubmenuquotltdivcss代码#submenu width 100px height 60px margin 100px；那我们就用css3实现吧提示关于浏览器的兼容性，你可以去 w3cschool 了解一下，我这里就不写那么繁琐的代码了div width200pxheight200pxbackgroundcolor#00ff00borderradius0 100px 0 0transformrotate；这个只用css不能完全实现，的配合js的定时器来完成，下面是代码lt！DOCTYPE html lthtml lthead lttitleHTML5lttitle ltmeta charset=quotutf8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth， i；lt！DOCTYPE HTMLlthtmlltheadltmeta charset=UTF8lttitleYuGiOhlttitleltstyle type=quottextcssquot#div position absolutetop 50pxleft 300pxwidth 300pxheight 300pxlineheight 300pxtextalign。

在HTML中，通过可以实现鼠标悬停在div上时，元素执行旋转45度效果Adivhovertransformrotate45deg Bdivhovertransformtranslate50px Cdivhovertransformscale15 Ddivhovertransformskew。