转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。
首先，CSS中2D转换的形式是这样的：
选择器{
transform：转换函数（参数，参数）；
}
而2D转换的函数一共分为五大类：
- translate() 定义位移的函数；其中后面的参数分别是相对x轴，y轴的偏移的距离，单位为像素，形式：translate（30px,30px）;表示相对x轴，y轴偏移30像素值，可以为负值，表示反向偏移；
- rotate() 定义旋转的函数；定义元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转，单位为角度deg（degree），形式rotate（30deg）;元素顺时针旋转30度，负值表示逆时针选装；
- scale()定义缩放的函数，根据给定的宽度（X 轴）和高度（Y 轴）参数，元素将进行缩放，单位为倍数，形式scale（2,2）;表示元素将会按照原尺寸在x轴，y轴分别放大2倍；可以为负数，表示旋转；
- skew()定义翻转的函数，根据给定的（X 轴、Y 轴）参数进行翻转，单位为角度deg，形式为skew(30px,30px);表示元素会在x轴y轴方向偏转30度；可以为负数，表示反向偏转；
- matrix() 函数方法把所有 2D 转换方法组合在一起，移动、旋转、缩放、以及翻转元素。注意的是：没有定义perspective（透视效果），没有预计的偏转效果。
下面是所有的2D Transform方法
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
具体实例可从W3C网站查看，网址如下：http://www.w3school.com.cn/css3/css3_2dtransform.asp
另外还有一个问题永远值得关注，那就是浏览器的兼容性问题。新版本的浏览器似乎都对 transform 定义的2D转换进行了支持，为了防止旧版本浏览器的兼容问题（Chrome 和 Safari 需要前缀 -webkit-），需要对浏览器做兼容性处理，因为你永远不知道网站访客使用的浏览器有多老。
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。
原文地址：https://www.cnblogs.com/web12/p/10022914.html
时间： 2024-10-11 08:37:18