CSS3中transform属性的详解

2019-09-13 郑州网站建设  

语法:none|<transform-function>[<transform-function>]* 初始值是none

transform-function函数取值:

matrix():定义矩阵变换。

translate():移动元素对象。

scale():缩放元素对象。

rotate():旋转元素对象。

skew():倾斜元素对象。

例如(兼容浏览器)

1.rotate()函数:transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2.scale()函数:transform: scale(2);-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);

当为scale传递不同的参数值时,缩放动画效果是不同的。scale(1,2)意思是宽度保持不变,高度变为原来的2倍。scale(1,-2)意思是宽度保持不变,高度变为原来的2倍且旋转180度。

3.translate()函数:transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px);参数可以是负的像素值。

4.skew()函数:transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg);会改变元素的形状,而rotate函数不会改变元素的形状。

5.matrix()函数:transform: matrix(3,2,3,5,0,0);-o-transform: matrix(3,2,3,5,0,0);-moz-transform: matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0);参数为6个数值。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2068.html转载请标明出处,谢谢合作!
标签:
  • |
  • tran
  • 语法
  • none
  • CSS3transfor