返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
css基础当前位置:首页 > HTML教程 > css基础 > 正文

css3非常实用的transform小属性

发布时间:2017-03-05 12:03:55   来源:   点击:
在写页面切图的时候,有时候需要一些设计师需要简单的小效果,比如鼠标滑过,光圈转动或者图片翻转之类的效果,这些简单的小效果不值得去动用插件或者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);
}

这是个非常有用的小效果。
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814