如何用CSS3中的transform功能

来源：广州IT培训学院时间：2022/5/23 9:46:11

　　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 */

　　}

　　浏览器支持

　　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的帮忙来演示一个关于css3transform的综合实例：

　　.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)}

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/1980/news/528387/违者必究！ 以上就是广州IT培训学院 小编为您整理 如何用CSS3中的transform功能的全部内容。