首页 > 代码库 > 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
CSS3中的变形处理(transform)属
transform的功能分类
1.旋转
transform:rotate(45deg);
该语句使div元素顺时针旋转45度。deg是CSS 3的“Values and Units”模块中定义的一个角度单位。
2.缩放
transform:scale(0.8,1);
使用缩放的方法实现文字或图像的缩放效果,在参数中指定缩放倍率。该语句使用scale方法使该元素在水平方向上缩小了20%,垂直方向上不缩放。
3.倾斜
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度,处置方向保持不变。
4.移动
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
指定变形的基准点
在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-orign属性,可以改变变形的基准点。
transorm-origin:left bottom;
left和bottom是基准点在元素水平方向和垂直方向上的位置。
对一个元素使用多种变形方法
transform:rotate(45deg) scale(1.5) translate(50px,0px);
该综合实例中对文字或图像先旋转45度,再缩放1.5倍,最后在水平方向移动150像素,在垂直方向移动200像素。
目前transform属性在WebKit引擎的Web浏览器上需要添加“-webkit-”前缀,在Fifefox浏览器需要添加“-moz-”前缀,Opera浏览器上需要需要添加“-o-”前缀
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。