当前位置 : IT培训网 > Web前端 > Web培训 > 如何使用CSS3中的transform功能

如何使用CSS3中的transform功能

时间:2017-07-18 16:38:13  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   CSS3(16)transform(4)
面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对这一问题,我们决定剖析CSS3,一一像各位同学解答CSS3到底是个神马东西。就已transform开始吧,写的不好的话,请严重拍砖!!

Transform是什么呢,据说transform是css3中的新功能,不少学员为止兴奋,纷纷来了解transform到底是什么东东,transform到底有什么用途,今天我们就来看看吧!

近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对这一问题,我们决定剖析CSS3,一一像各位同学解答CSS3到底是个神马东西。就已transform开始吧,写的不好的话,请严重拍砖!!

CSS3 transform是什么?

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性?

transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

用法一:transform:rotate()

含义:旋转;其中“deg”是“度”的意思,如“7deg”表示“7度”下同。

.demo_transform1{-webkit-transform:rotate(7deg);-moz-transform:rotate(7deg)}

实例:旋转 div 元素:

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg);          /* IE 9 */

-moz-transform:rotate(7deg);        /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg);    /* Opera */

}

浏览器支持

如何使用CSS3中的transform功能_www.itpxw.cn

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

用法二:transform:skew()

含义:倾斜;

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

用法三:transform:scale()

含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

用法四:transform:translate()

含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

用法五:transform综合

transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容