手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css3通过scale()、rotate()实现放大、旋转
css3通过scale()、rotate()实现放大、旋转
摘要:css3通过scale()实现放大功能通过rotate()实现旋转功能而transition则可设置元素变化所需的时间html中的结构代码c...

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>

css3样式

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%;

}

【css3通过scale()、rotate()实现放大、旋转】相关文章:

css实现文字的自动隐藏

css3实现input输入框颜色渐变发光效果代码

CSS调试工具MultipleIE-IE5IE6IE7多版本共存

DIV边距属性在Chrome和IE中的区别

实现链接的虚线下划线效果

提高编写CSS代码效率的10个习惯

CSS2.0手册(苏沈小雨版)

css清除浮动clearfix:after的用法详解

div+css实现的滑动门

css实现鼠标滑过改变文字(中文变英文)

精品推荐
分类导航