转换是使元素改变形状、尺寸和位置的一种效果，对元素进行移动、缩放、转动、拉长或拉伸。
属性：transform
2D转换属性值
translate() // x,y位置移动 rotate() // 顺时针旋转角度 scale() // x,y元素尺寸增加或减少 skew() // x,y元素翻转给定的角度
1） ）translate()
通过 translate() 方法，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，元素从其当前位置移动。
例如：
div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
值translate(50px,100px)把元素从左侧向右移动50px，从顶端向下移动100px。
2） ）rotate()
通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
例如：
div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
3） ）scale()
通过scale()方法，根据给定的宽度（X轴）和高度（Y轴）参数，元素的尺寸会增加或减少。
例如：
div{ transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }
值scale(2,4)把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。
4） ）skew()方法 方法
通过skew()方法，根据给定的水平线（X轴）和垂直线（Y轴）参数，元素翻转给定的角度。
例如：
div{ transform: skew(10deg,20deg); -ms-transform: skew(10deg,20deg); /* IE 9 */ -webkit-transform: skew(10deg,20deg); /* Safari and Chrome */ -o-transform: skew(10deg,20deg); /* Opera */ -moz-transform: skew(10deg,20deg); /* Firefox */ }
值skew(30deg,20deg)表示围绕X轴把元素翻转30度，围绕Y轴翻转20度。
3D转换属性值 转换属性值
rotateX() 围绕X轴根据角度旋转 rotateY() 围绕Y轴根据角度旋转
transform:rotateX(120deg); transform:rotateY(130deg);
1.2 CSS3过渡（ 过渡（transition）
）
来源：https://www.cnblogs.com/Steven-wangxi/p/6714015.html