转换是使元素改变形状、尺寸和位置的一种效果。通过 css3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。
首先，css3中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 轴。 |
css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后，再给内部的div设置height:100%的时候，内部div的高度100%才会起到作用。这是由于：%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height。
如何写出一套可维护的CSS库？
如何写出一套可维护的CSS库？不妨谈谈CSS的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。
css自动省略号...，通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号，这篇文章将总结通过多种方法实现文本末尾省略号显示。
20个常用的CSS知识点
如何隐藏滚动条，修改滚动条样式，修改input框placeholder的颜色，按钮不可点击的样式，CSS鼠标指针事件：阻止任何JS事件，文字超出强制n行 超出部分用省略号代替，修改字体间距
六种组织CSS的方式
Ben Frain曾经说过，写css代码很容易，但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:结构与设计分离,容器和内容分离
CSS基础一定要看的包含块（containing block）
一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。在本文中，我们来过一遍确定包含块的所有因素。
css数值(百分比|负值)
今天为什么要给大家讲解这个东西呢，因为css这部分，尤其是数值这部分感觉非常简单，但是尤其是简单的，却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。
20条书写CSS代码
在这篇文章中，我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手，而有些则更高级一些，但我希望每个人都可以在本篇文章中收获自己不知道的知识。
Javascript可以控制css吗？
JavaScript可以直接控制css。JavaScript中可以直接设置style的属性、改变class、设置cssText、创建引入新的css样式文件等方法来控制css样式。
为什么 CSS 这么难？
我同 CSS 打交道已经有几年了，每当需要就会用到它。最近我想明白了一个问题，那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎，你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!