在《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);
}
旋转图片演示
Tips:You can change the code before run.
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3224.html
客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？ 不需要，因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别： 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小，宽度通常在600像素以下，pc…
v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…
有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说，我们有两个由链接组成的列表。…
假如能把自己喜欢的的图像放到网页上，那就太好了。 这貌似有点难度。。。 也许是有点难度，但其实也不难，一个元素就可以搞定： 例1： <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下： 你要做的只是：告诉浏览器你要插入一张图…
FLV是被众多新一代视频分享网站所采用，是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称，它形成的文件极小、加载速度极快，有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时，插入FLV格式视频的代码（兼容主流浏览器）： <object class id=”clsid:D27CDB6E-AE6D-11cf…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}