4当前位置:网页制作CSS教程CSS3通过scale()和rotate()实现…
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·CSS盒子模型图解
·设置span宽度和高度的方法
·CSS3通过scale()和rotate()实现放大和旋转
·ASP中空字符串、IsNull及IsEmpty的区别
·CSS Bug顺口溜
·CSS实现未知高度的DIV垂直居中
·CSS实现水平垂直居中的两种方法
·简述css中em和px的区别
·兼容各种浏览器的css:fixed定位效果
·CSS分隔线的几种方法
4热门网页制作
·使网页变灰的代码(包括FLASH等所有网页元素)
·应用CSS美化网页
·CSS实现文字底部对齐
·一款DIV+CSS制作的导航条
·CSS隐藏表格超出的内容
·CSS使网页背景图片居中的三种方法
·用CSS改变鼠标箭头
·表格边框CSS语法大全
·CSS制作文本或图片闪烁效果
·几种常用的新闻列表样式
4相关网页制作
·CSS Bug顺口溜
·CSS改变链接翻滚效果
·使用div+css布局怎样避免浏览器兼容问题
·层叠样式表(CSS)全接触之一
·CSS设计复合型条状图表
·简易的全屏透明遮罩(Lightbox)解决方案
·overflow代替left截取指定长度字符串
·CSS设计网页布局
·固定网页语言编码、字号及字体
·CSS图片防盗链
CSS3通过scale()和rotate()实现放大和旋转
类别:CSS教程    来源:网络    时间:2014/4/22    贴士:推荐给好友
收藏本页 8 
  CSS3通过scale()实现放大功能,通过rotate()实现旋转功能,而transition则可设置元素变化所需的时间。

  html代码:
<ul>
 <li><img src="image/1.jpg"></li>
 <li><img src="image/2.jpg"></li>
 <li><img src="image/3.jpg"></li>
</ul>


  CSS代码:
ul{
 margin-top:50px;
 list-style:none;
}
ul li{
 width:200px;
 height:150px;
 float:left;
 margin-left:10px;
 -webkit-transition:all 1s;
 -moz-transition:all 1s;
 -o-transition:all 1s;
}
ul li:hover{
 -webkit-transform:scale(1.5) rotate(10deg);
 -moz-transform:scale(1.5) rotate(10deg);
 -o-transform:scale(1.5) rotate(10deg);
}
li img{
 width:100%;
 height:100%;
}
·上一篇:ASP中空字符串、IsNull及IsEmpty的区别
·下一篇:设置span宽度和高度的方法
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号