一、Transform转换
让一个元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。
语法
transform: none | <transform-function> [<tranform-function>]*; ps：当要使用多个转换方法的时候中间是用空格隔开
| transform-function | 说明 |
|---|---|
| none | 无转换 |
| 2D Transform Functions | |
| matrix() | 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 |
| translate() | 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 |
| translatex() | 指定对象X轴（水平方向）的平移 |
| translatey() | 指定对象Y轴（垂直方向）的平移 |
| rotate() | 指定对象的2D rotation（2D旋转），需先有 <’ transform-origin ‘> 属性的定义 |
| scale() | 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 |
| scalex() | 指定对象X轴的（水平方向）缩放 |
| scaley() | 指定对象Y轴的（垂直方向）缩放 |
| skew() | 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 |
| skewx() | 指定对象X轴的（水平方向）扭曲 |
| skewy() | 指定对象Y轴的（垂直方向）扭曲 |
| 3D Transform Functions | |
| matrix3d() | 以一个4x4矩阵的形式指定一个3D变换 |
| translate3d() | 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 |
| translatez() | 指定对象Z轴的平移 |
| rotate3d() | 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 |
| rotatex() | 指定对象在x轴上的旋转角度 |
| rotatey() | 指定对象在y轴上的旋转角度 |
| rotatez() | 指定对象在z轴上的旋转角度 |
| scale3d() | 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 |
| scalez() | 指定对象的z轴缩放 |
| perspective() | 指定透视距离 |
（一）2D转换
1.旋转 （rotate）
通过指定的角度对元素进行2D旋转。
语法
-webkit-transform: rotate(angle);
-moz-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);angle：指定旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D旋转rotate</title>
<style>
*{margin: 0;padding: 0;}
img{border: 0;}
.main{width: 1000px;margin: 50px auto;position: relative;}
.pic{width: 300px;height: 290px;border: 1px solid #ccc;background: #FFF;position: absolute;}
.pic img{margin: 10px auto 5px;width: 285px;height: 240px;display: block;}
.pic p{text-align: center;height: 35px;line-height: 35px;}
.pic1{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
.pic2{
top: 220px;
left: 230px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.pic3{
top: 200px;
left: 100px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.pic4{
top: 10px;
left: 330px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
}
</style>
</head>
<body>
<div class="main">
<div class="pic pic1">
<img src="./img/timg1.jpg" alt="图片1">
<p>图片1</p>
</div>
<div class="pic pic2">
<img src="./img/timg2.jpg" alt="图片2">
<p>图片2</p>
</div>
<div class="pic pic3">
<img src="./img/timg3.jpg" alt="图片3">
<p>图片3</p>
</div>
<div class="pic pic4">
<img src="./img/timg4.jpg" alt="图片4">
<p>图片4</p>
</div>
</div>
</body>
</html>
2.移动 （translate）
translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。
三种情况
translateX(x)仅水平方向移动（X轴移动）；
translateY(y)仅垂直方向移动（Y轴移动）；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
语法
transform: translateX(px|%|em); //值为负的话，往负方向移动。案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动</title>
<style>
div{width: 400px;height: 300px;margin: 100px auto;background-color: #66ccff;
}
div>img{width: 100%;height: 100%;transform: translate(-100%,-30px);
}
</style>
</head>
<body>
<div>
<img src="./img/timg1.jpg" alt="图片1">
</div>
</body>
</html>
3.缩放 （scale）
transform:scale(x,y) 2D缩放
scaleX(x)元素仅水平方向缩放（X轴缩放）；
scaleY(y)元素仅垂直方向缩放（Y轴缩放）；
scale(x,y)元素水平垂直方向同时缩放。
scale(x,y)。坐标原点为中心点，只用一个参数时是等比例缩小放大，小于1缩小大于1放大。
4.扭曲 （skew）
skew:扭曲，斜切扭曲，x轴和Y轴分别为圆心中心点的轴线。
skewX(度数)：值为正时逆时针，负值为顺时针。
skewY(度数)：值为正时顺时针，负值为逆时针。
skew(x,y):只有一个值默认为X轴。
注意
只有一个参数时，第二个参数默认为0
（二）3D转换
1.3D旋转 （rotateX、rotateY、rotateZ和rotate3d）
rotate3d：3d旋转，可以分开成rotateX,rotateY和rotateZ写。
语法
transform:rotateX(angle);
transform:rotateY(angle);
transform:rotateZ(angle);
//合并
transform:rotate3d(x,y,z,angle) ;
//x,y,z的取值0|1|-1|.number，表示旋转方向
//0表示这个轴不参与旋转，
//1或其他正数表示这个轴旋转顺时针，
//-1或其他负数表示这个轴逆时针，
//.number 小数时实际改变的度数是 angle乘以小数，小数最多两位，4个参数不允许省略。2. 3D移动（translateZ()和translate3d()）
translate3d：(x,y,z)对应xyz，参数不允许省略，也可以单独分开写translateX()、translateY()、translateZ()。
3. 3D缩放 ( scaleZ()和scale3d() )
scaleZ(比例) Z轴上进行缩放，厚度受影响。
scale3d(x,y,z)
1.三个参数缺一不可
2.厚度也将会变成原来0.5倍
3.由于参数不能省略所以不能用它来表示整体等比缩放
二、Transform的坐标系统
设置元素的缩放、旋转、平移的基准点 。
transform-origin属性
transform-origin属性允许更改转换元素的基准点。
语法
transform-origin:x-axis y-axis [z-axis];
例子
将图片旋转的基准点改为图片的左上角（默认是图片的中心点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-origin</title>
<style>
div.main{width: 400px;height: 300px;margin: 100px auto auto auto;background-color: #66ccff;border: 1px solid #000000;}
div.main>img{
width: 100%;
height: 100%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: left top;
}
</style>
</head>
<body>
<div class="main">
<img src="./img/7.jpg" alt="图片1">
</div>
</body>
</html>
三、CSS3的矩阵
CSS3的矩阵准确的说应该是transform中的两个方法：matrix()和matrix3d()
matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
matrix3d()： 以一个4x4矩阵的形式指定一个3D变换
transform的中的所有的平移、旋转、缩放（包括3D的）都可以使用这两个方法实现。
也就是说transform中的方法都是对这两个方法的封装。
四、transform-style属性
transform-style属性指定嵌套元素是怎样在三维空间中呈现。
transform-style: flat(默认值) | preserve-3d;
是放在要进行3D呈现元素的父元素里；
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-style</title>
<style>
div.main{
width: 700px;
height: 700px;
margin: auto;
position: relative;
border: 2px solid #000;
-webkit-transform-style: preserve-3d; //设置呈现类型
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.main>div.inner,
div.main>div.outer{
width: 100%;
height: 100%;
position: absolute;
}
div.main>div.inner{
background-image: url('./img/7.jpg');
background-repeat: no-repeat;
background-position: center;
}
div.main>div.outer{
background-image: url('./img/1.png');
background-size: contain;
transform: rotateY(45deg); //以Y轴旋转45度
}
</style>
</head>
<body>
<div class="main">
<div class="inner"></div>
<div class="outer"></div>
</div>
</body>
</html>效果
会有一种圆环嵌套的感觉。
而未设置transform-style（默认值）
五、perspective属性
perspective属性：指定观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。
perspective: number(像素值) | none(默认值); 和transform-style属性放在一起。
属性值为0、none、负值时没有效果。
例子
使用上面的例子
div.main{
width: 700px;
height: 700px;
margin: auto;
position: relative;
border: 2px solid #000;
transform-style: preserve-3d;
perspective: 300px;
}效果
perspective-origin属性：指定透视点的位置。
perspective-origin: x-axis y-axis;
默认值：perspective-origin: 50% 50%;可以用top，bottom等关键词