css3 transform 变形属性详解

时间:2023-03-08 17:23:36
css3 transform 变形属性详解

本文主要介绍了css3 属性transform的相关内容,针对CSS3变形、CSS3转换、CSS3旋转、CSS3缩放、扭曲和矩阵做了详细的讲解。希望对你有所帮助。

这个很简单,就跟border-radius一样,就是一个参数,同样是针对不同的浏览器有不同的私有属性。·

w3c上的例子是这样子写的:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

好吧,我发现我错了,这玩意还不是一般的容易,还有N多的函数可以使用的啊。具体如下:

//code from http://caibaojian.com/transform.html
Formal grammar: <transform-function> [<transform-function>]* | none
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px) transform: translateX(10px) rotate(10deg) translateY(5px) 下面我简单的介绍几种比较常用的方法

一、旋转rotate

rotate(<angle>) :通过指定的角度参数对原元素指定一个 2D rotation (2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设 置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg):

css3 transform 变形属性详解
二、移动translate

移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动),具体使用方法如下:

transform:translate(100px,20px):

css3 transform 变形属性详解

transform:translateX(100px):

css3 transform 变形属性详解

transform:translateY(20px):

css3 transform 变形属性详解

三、缩放scale

缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩 放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中 心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。下面我们具体来看看这三种情况具体使用方法:

transform:scale(2,1.5):

css3 transform 变形属性详解

transform:scaleX(2):

css3 transform 变形属性详解

transform:scaleY(2):

css3 transform 变形属性详解

四、扭曲skew

扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值 进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具体使用 如下:

transform:skew(30deg,10deg):

css3 transform 变形属性详解

transform:skewX(30deg)

css3 transform 变形属性详解

transform:skewY(10deg)

css3 transform 变形属性详解

五、矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>)
其他的内容可以看这里的文章介绍,很详细:http://www.w3cplus.com/content/css3-transform (本文图片和部分文章来源于这里,感谢作者)

来源:前端开发博客