2D和3D的介绍
在CSS3中可以为任意元素添加2D的变形，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。3D转换是基于二维变换的相同属性，如果熟悉二维变换，会发现3D变形的功能和2D变换的功能类似。CSS3中的3D变换主要包括以下几种，如： 3D位移、 3D旋转、3D缩放、3D矩阵。
三维坐标系
要想实现2D和3D的转换，首先我们要对三维坐标系有一个认识，帮助我们对转换有更深入的理解。
2D转换
通过2D转换，我们够对元素进行移动、缩放、转动、拉长或拉伸
transform方法
函数 | 描述 |
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 轴 |
一、平移translate()
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数;
（1）X轴正方向移动px，Y轴正方向移动px。
transform: translate(50px,100px);（2） X轴负方向移动50px
transform：translatex（-50px)：（3）Y轴负方向移动50px
transform：translatey（-50px)：二、旋转rotate()
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
（1）X轴顺时针旋转30度
transform：rotate(30deg)；（2）Y轴逆时针旋转30度
transform：rotatey(-30deg)；三、scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
（1）元素增加尺寸
transform：scale（1.2）；（2）元素减小尺寸
transform：scale（0.8）；四、skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数；
transform: skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
3D转换
3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。与2D变换的功能相类似。
函数 | 描述 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
转换的属性
属性 | 描述 |
向元素应用 2D 或 3D 转换。 | |
允许你改变被转换元素的位置。 | |
规定被嵌套元素如何在 3D 空间中显示。 | |
规定 3D 元素的透视效果。 | |
规定 3D 元素的底部位置。 | |
定义元素在不面对屏幕时是否可见。 |
（1）transform-origin
该属性可以改变元素的原点位置，默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，如下图：
我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
使用规则
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。
top left | left top 等价于 0 0；
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*初始状态*/
.heart {
position: relative;
width: 200px;
height: 180px;
background-color: blue;
margin: 0 auto;
}
/*取基点左下角，逆时针旋转45度*/
.heart ::before {
position: absolute;
content: "";
left: 100px;
bottom: 0;
width: 100px;
height: 150px;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
/*取基点右下角，顺时针旋转45度*/
.heart ::after {
position: absolute;
content: "";
left: 0px;
bottom: 0;
width: 100px;
height: 150px;
background-color:red;
border-radius: 50px 50px 0 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<div class="heart">
<div></div>
</div>
</body>
</html>
（2）transform-style
语法
transform-style: flat | preserve-3d
取值
flat：所有子元素在 2D 平面呈现。
preserve-3d：保留3D空间。
（3）perspective
perspective属性固名思义就是透视的意思；该属性可以定义3D视觉的角度，父元素拥有perspective属性，让子元素使用3D特效时能够完整显示。
只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法如下：
- 只能选择透视方式，也就是近大远小的显示方式。
- 镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。
- 可以调整镜头与平面位置（用perspective属性）：
- perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。
- perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。
案例一
<!DOCTYPE html>
<html>
<head>
<style>
.block
{
position: relative;
height: 150px;width: 150px;margin: 50px;padding:10px;
border: 1px solid black;
perspective:150px;
}
.child
{
position: absolute;
padding:50px;border: 1px solid black;background-color: yellow;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="block">
<div class="child">LALA</div>
</div>
</body>
</html>原图 X轴旋转45度 perspective：150px
案例二
<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color: black; }
.images { width: 200px; height: 200px; margin: 100px auto; perspective:400px; }
.images img{ width: 100%; height: 100%; transform: rotatey(45deg); }
</style>
</head>
<body>
<div class="images">
<img src="./img/5b7d074cN4ba7e369.jpg" alt=""/>
</div>
</body>
</html>原图
Y轴旋转45度
是不是效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。现在我们试试perspective属性。我们设置perspective:400px;
