CSS3的transform:scale()可以实现按比例放大或者缩小功能，transform呈现的是一种变形结果。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡，transition呈现的是一种过渡，是一种动画转换过程，如渐显、渐弱、动画快慢等。
transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；
transiton:transition-property transition-duration transition-timing-function transition-delay
transition-property ：指定要过渡的css属性
transition-duration： 指定完成过渡花费的时间
transition-timing-function： 指定速度效果的速度曲线，取值：
linear：匀速
ease： 默认，动画以低速开始，然后加快，在结束前变慢。
ease-in：缓慢开始（加速）
ease-out：缓慢结束（减速）
ease-in-out：缓慢开始，缓慢结束（先加速后减速）
ease： 默认，动画以低速开始，然后加快，在结束前变慢。
ease-in：缓慢开始（加速）
ease-out：缓慢结束（减速）
ease-in-out：缓慢开始，缓慢结束（先加速后减速）
transition-delay：指定过渡效果何时开始
CSS3 transition transform实例-鼠标放到图片上图片等比例放大
Html代码：
<div> <img src="1.jpg" /> </div>
CSS代码：
div {
width: 500px;
height: 500px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
div img {
cursor: pointer;
transition: all 0.7s;
}
div img:hover {
transform: scale(1.5);
}
代码解释：
transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。
兼容各浏览器的实例代码，请阅读《鼠标指向图片实现放大效果-CSS3特效》一文。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2405.html
微信扫一扫 
支付宝扫一扫 