转换是使元素改变形状、尺寸和位置的一种效果。通过 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 框架
我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架，不涉及 JS 部分，主要用于网页的布局。
什么是css sprites(雪碧图)，css sprites使用的优缺点
css sprites雪碧图：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
css数值(百分比|负值)
今天为什么要给大家讲解这个东西呢，因为css这部分，尤其是数值这部分感觉非常简单，但是尤其是简单的，却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。
css实用小技巧_css常用技巧和经验总汇
这篇文章整理了一些css常用技巧和经验总汇，包括：如何清除图片下方出现几像素的空白间隙？如何让文本垂直对齐文本输入框？如何让单行文本在容器内垂直居中？为什么Standard mode下IE无法设置滚动条的颜色？
为什么 CSS 这么难？
我同 CSS 打交道已经有几年了，每当需要就会用到它。最近我想明白了一个问题，那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎，你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难
CSS 解析原理_你知道浏览器CSS是如何解析吗？
作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？ 浏览器渲染过程分为了两条主线：其一，HTML Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rules ；
精简CSS代码，提高代码的可读性和加载速度
定义简洁的CSS规则：CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。
能用HTML/CSS解决的问题就不要使用JS
为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。
Js如何动态修改css样式
使用obj.className来修改样式表的类名，使用obj.style.cssTest来修改嵌入式的css，使用obj.className来修改样式表的类名，使用更改外联的css文件，从而改变元素的css
原来 CSS 这样写是会让 App 崩溃的
之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击，当时有朋友跟我说，让我去获取那个网站的 cookie，再然后进入那个网站的后台去玩。然而，技术能力实在有限，搞不了这些东西
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!