转换是使元素改变形状、尺寸和位置的一种效果。通过 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最容易躺枪的二十规则，大家能躺中几条？
满屏div之css最容易中枪的二十条规则，你中枪了吗？一、float:left/right 或者 position: absolute 后还写上 display:block？二、认为布局就是 Float，所有的地方都是 Float，全家都是 Float！
CSS开发中的10个不要
自我进入这个行业，我就发现开发人员一直在努力征服CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义。
网页打印css print
说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题
react中使用css的7种方式
react中使用css的7种方式：在组件中直接使用style、在组件中引入[name].css文件、在组件中引入[name].scss文件、在组件中引入[name].module.css文件、在组件中引入 [name].module.scss文件、使用styled-components
CSS 技术技巧_提高你CSS技术的法则
CSS技术技巧法则:不要让你的代码脱离你的掌控，尽量简洁、掌握基础、保持代码的可复用性、面向对象的css、Css3了解他能做的以及你可以使用的部分、渐进增强与优雅降级、Css预处理工具...
css常用代码
禁止div点击;鼠标放置显示“小手”手势，并显示提示文字;超出区域的文字显示省略号;div+css控制图片等比例缩放；设置元素在另一个元素的最底部；设置背景颜色，不透明度
如何编写轻量级 CSS 框架
我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架，不涉及 JS 部分，主要用于网页的布局。
不为人知的七个CSS知识点
如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。
用 CSS background 实现刻度线的呈现
简单的实现方式，大致有两种：一是用图片做背景，横向平铺线条图片；二是给每一块刻度区域平铺一个元素，然后用边线实现。身为一个“环保主义者”，这两种方式都不能让我满意。在看了 Lea Verou 的 CSS SECRETS 后，我受到了启发——可以用渐变背景的方式去实现。
什么是css sprites(雪碧图)，css sprites使用的优缺点
css sprites雪碧图：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!