css transform属性详解,Css transform

　　在CSS3中，transform函数可以用来实现四种类型的变形处理：字符或图像的旋转、缩放、倾斜和移动。

1、浏览器支持

　　目前为止：Safari3.1以上3.1，Chrome8以上8，Firefox4以上4，Opera10以上10个浏览器支持该属性。

2、旋转

　　使用rotate方法向参数添加角度值。角度值后面是表示角度单位的单词“deg”。旋转方向为顺时针。

　　变换：旋转(45度)；

3、缩放

　　缩放方法用于缩放文本或图像，缩放比例在参数中指定。

　　变换：缩放(0.5)；//减半(1)可以分别指定元素的水平放大倍数和垂直放大倍数。

　　transform:scale(0.5，2)；//水平放大一半，垂直放大两倍。

4、倾斜

　　使用skew方法实现文本或图像的倾斜处理，在参数中分别指定水平方向的倾斜角度和垂直方向的倾斜角度。

　　变换：倾斜(30度，30度)；//水平倾斜30度，垂直倾斜30度。(1)只使用一个参数，另一个参数省略。

　　在这种情况下，认为倾斜仅在水平方向，而不在垂直方向。

　　变换：倾斜(30度)；

5、移动

　　使用translate方法移动文本或图像，并在参数中分别指定水平方向的移动距离和垂直方向的移动距离。

　　transform:translate(50px，50px)；//水平移动50px，垂直移动50px(1)只使用一个参数，另一个参数省略。

　　在这种情况下，它被视为仅在水平方向上移动，而不在垂直方向上移动。

　　transform:translate(50px)；6.对一个元素使用多种变形方法。

　　变换：平移(150像素，200像素)旋转(45度)缩放(1.5)；

7、指定变形的基准点

　　当转换方法用于文本或图像变形时，元素的中心点用作变形的参考点。

　　变换原点属性

　　使用该属性改变变形的基准点。

　　变换：旋转(45度)；变换原点：leftbottom//修改元素左下角的参考点(1)指定属性值。

　　基准点在元素水平方向上的位置：左、中、右

　　基准点在元素垂直方向上的位置：顶部、中心、底部

8、3D变形功能

　　 (1)旋转

　　使用rotateX方法、rotateY方法和rotateZ方法分别围绕X轴、Y轴和Z轴旋转元素。在参数中加上角度值，角度值后面跟着表示角度单位的deg字样。旋转方向为顺时针。

　　变换：rotateX(45度)；变换：旋转(45度)；变换：rotateZ(45度)；transform:rotateX(45度)rotateY(45度)rotateZ(45度)；transform:scale(0.5)rotateY(45度)rotateZ(45度)；(2)缩放

　　ScaleX方法、scaleY方法和scaleZ方法用于根据X轴、Y轴和Z轴缩放元素，缩放比例在参数中指定。

　　transform:scaleX(0.5)；变换：scaleY(1)；transform:scaleZ(2)；transform:scaleX(0.5)scaleY(1)；变换：缩放(0.5)旋转(45度)；(3)倾斜

　　SkewX方法和skewY方法用于分别在X轴和Y轴上顺时针倾斜元素(无skewZ方法)，倾斜角度在参数中指定。

　　变换：skewX(45度)；变换：倾斜(45度)；(4)移动

　　使用translateX方法、translateY方法和translateZ方法在x轴、y轴和z轴方向移动元素，并在参数中添加移动距离。

　　transform:translate x(50px)；transform:translate y(50px)；transform:translate z(50px)；

9、变形矩阵

　　每种变形方法背后都有对应的矩阵。

　　(1)计算2D变形(3X3矩阵)

　　\ begin { b matrix } ace \ \ BDF \ \ 001 \ end { b matrix }这个2D变形矩阵可以写成matrix (a，b，c，d，e，f)，其中a ~ f都代表一个数，用来决定如何进行变形处理。

　　(2) 2D矩阵的翻译

　　\ begin { b matrix } 10tx \ \ 01ty \ \ 001 \ end { b matrix }//效果相同：右移150px，下移150 px Transform:matrix(1，0，0，1，150，150)；transform:translate(150px，150 px)；(3)计算三维变形。

　　用于缩放3D变形的4X4矩阵

　　\ begin { b matrix } sx 000 \ \ 0sy 00 \ \ 00sz 0 \ \ 0001 \ end { b matrix } transform:matrix 3d(sx，0，0，0，0，0，sy，0，0，0，sz，0，0，0，0，1)；//效果是一样的：X轴方向收缩五分之一，Y轴方向收缩一半。transform:scale3d(0.8，0.5，1)；transform:matrix3d(0.8，0，0，0，0，0.5，0，0，0，0，1，0，0，0，0，1)；(4)可以通过矩阵进行多次变形处理。

　　这个过程可以通过将所需的变形矩阵相乘以获得新的变形矩阵来实现。

　　关于css3中transform属性实现的四个功能的文章到此结束。有关css3中transform属性实现的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。