在《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实现段落首字下沉效果方法一 在CSS布局中，通过设置首字的大小并向左浮动，从而使得首字与其他字符区别；通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…
box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after，我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…
上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…
主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <!DOCTYPE html> &…
1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的，但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来，其中有的渐变色甚至拥有极为复杂的情绪，而你需要做的，就是输入你想传递的情绪，然后就能搜到相关的情绪和色彩，包括渐变的 CSS …
微信扫一扫 
支付宝扫一扫 
评论列表（1条）
鼠标放上去不仅旋转，还有放大效果的话，加上scale(1.4) ，代码如下：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}