在写页面切图的时候，有时候需要一些设计师需要简单的小效果，比如鼠标滑过，光圈转动或者图片翻转之类的效果，这些简单的小效果不值得去动用插件或者jq去写的，在css3中提供这样的方法，直接可以在css中操作这些小效果。
效果一:360°旋转 修改rotate(旋转度数)
transform:rotate():
含义:旋转;其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
实例:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
效果二:放大 修改scale(放大的值)
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
.test{
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
background:url(img/i.png) no-repeat;
width:198px;
height:133px;
}
效果三:旋转放大 修改rotate(旋转度数) scale(放大值)
效果四:上下左右移动 修改translate(x轴,y轴)
移动translate
含义:变动，位移;如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。
例子
比如需鼠标经过某个区域，图片或其他需要旋转之类:
.news-fr li:hover img {
-webkit-transform:rotate(360deg) scale(1.5); /**放大1.5倍**/
-moz-transform:rotate(360deg) scale(1.5);
-ms-transform:rotate(360deg) scale(1.0); /** 旋转一圈**/
-o-transform:rotate(360deg) scale(1.0);
}
这是个非常有用的小效果。
css3非常实用的transform小属性
admin
2017-03-05 12:04:08
￥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏，我们将继续分享更多优质内容，让我们一起创建更加美好的网络世界！
支付宝扫一扫打赏
微信扫一扫打赏
本文《css3非常实用的transform小属性》发布于石头博客文章，作者：admin，如若转载，请注明出处：https://www.pweb123.com/html/css/683.html，否则禁止转载，谢谢配合!
阅读排行
小程序插件
站长推荐
-
百度小程序审核被拒原因--汇总各种奇葩原因
- 487
-
-
-
重新对百度支付进行编写封装（百度智能小程序支付）
- 372
-
-
-
phpcms小程序插件api接口升级到4.3
- 814
-
-
phpcms封装的微信h5支付源码DEMO参考
- 756
-
添加微信好友
文章点评