CSS3的变形处理-笔记

在qq空间,点击右侧栏目的小图标,都会顺时针一个角度。

其中就是运用变形功能,css3中transform可以实现文字或图像的旋转、缩放、倾斜和移动。

旋转写法(以chrome为例):

-webkit-transform:rotate(30deg);顺时针旋转30度

缩放:

-webkit-transform:scale(0.5);缩小50%,0.5是缩放倍率

可以指定水平和垂直方向的缩放倍率

倾斜:

-webkit-transform:skew(30deg,30deg);水平和垂直方向上倾斜为30度。

若其中只有一个缺省参数,则只有一个水平倾斜。

移动:

-webkit-transform:translate(50px,50px);水平方向上移动50px,垂直方向上移动50px。

同样,若其中只有一个缺省参数,则只有一个水平移动。


变形处理,可以以上写法,也可以-webkit-transform:translate(50px,50px) rotate(30deg) scale(0.5);

会顺序执行以上属性设置,先移动,后旋转,再缩放。顺序可以颠倒,但是顺序不一样也会导致效果不一样。


在处理变形时,可以设置以元素的中心点为基准点进行,

-webkit-transform-origin:left bottom;根据元素的左下角为基准点进行变形

两个参数分别水平方向上的位置:left,center,right,垂直方向上的位置:top,center,bottom


备注:属性都是针对2d设置,有些属性可以对3d设置(就是多了一个方向设置)。





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值