在《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
我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理： 举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示： 如何实现这个效果？ 上例的HTML代码如下所示： <div id=”picture”><…
边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等…
CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…
本实例制作需要学习《CSS3 transition transform属性及实例详解》，学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.
如何在网页上播放wmv格式视频？ 1、将以下代码复制到html网页的<body>中：如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}