变形转换
属性：transfrom
1.Translate----位移
- 概念
该属性值可以让元素从当前位置根据X轴Y轴，在水平和垂直方向进行移动。
注意：
在浏览器中一般只要说到x,y轴，那么基本是都是以下面方式计算原点和方向
原点： 元素或者窗体的左上角
x轴正方向：元素或者窗体的右边
y轴正方向：元素或者窗体的下边
- 用法
只要给当前元素的css属性transform设置值为translate就可以实现位移了。
实例一：
设置元素在X轴的位移
写法：transform：translateX( x轴距离)
实例二：
设置元素在Y轴的位移;
实例三：
同时设置元素在X轴与Y轴的位移
写法：transform：translate( x轴距离, y轴距离)
可以写两个值分别设置在x,y轴上的距离，也可以只写一个值同时设置x,y轴上的距离。
设置负值
注意事项
1.当translate只给一个值时，就等效于translateX（x轴距离）
2.使用translateX与translateY时，xy大小写皆可。
3.他的移动与相对定位有点相似，在进行移动后，自身的位置仍然保留，同时新位置处若有其他元素那么他会浮动到其他元素之上，而不会影响到其它元素的位置。
4.translate可以作用于已经执行了定位的元素。（不管是绝对定位还是相对定位又或者是浮动定位）
5.使用“translate”可以让 GPU 参与运算，动画的 FPS（每秒传输帧数）更高，更加流畅。
2.Scale----缩放
- 概念
1.该属性值会让元素以当前元素的中心进行缩放，参数的值就是缩放比例，为一个整数或浮点数。（也可以给负数，但是意义不大）
2.默认为1，不进行缩放，“0.8”表示缩小为原来的80%，“1.5”表示扩大到原来的150%，参数不需要单位。
- 写法
和位移的写法一致
1.transform：scaleX( 沿x轴缩放比例) “scaleX”设置元素在X轴方向的缩放
2.transform：scaleY( 沿y轴缩放比例 ) “scaleY”设置元素在Y轴方向的缩放
3.transform：scale( x比例，y比例) “scale”可以同时设置元素在X轴和Y轴方向的缩放，参数间用逗号“,”进行分隔。
如果scale只给一个值，表示X,Y轴同时缩放，这点和位移不一样。
注意
1.scaleX和scaleY中，xy大小写均可。
2.缩放是在原位置上进行，但是不会挤压周围元素，缩放超出的大小会浮动在周围元素之上。（位移，缩放，旋转都是如此）
3.Skew----倾斜
-
概念
该属性值会让元素根据水平（X轴）和垂直（Y轴）线参数设定倾斜角度。 -
写法
1.transform：skewX( x轴倾斜度) “skewX”用于控制元素在水平x轴方向的倾斜
2.：transform：skewY( y轴倾斜度) “skewY”用于控制元素在垂直y轴方向的倾斜
3.：transform：skew( x轴倾斜度，y轴倾斜度) “skew”有两个参数（一个参数相当于“skewX”，和位移一样），分别控制元素在水平和垂直轴方向的倾斜，参数间用逗号“,”进行分隔
注意事项
1.使用skewX与skewY时，xy大小写皆可。
2.倾斜的原点为元素中心位置，
3.如果设置了沿x轴倾斜，那么倾斜的两根线就应该是两根竖线，如果设置了沿y轴倾斜，那么倾斜的两根线就应该是两根横线，
4.度数为正数时，倾斜的轴是朝左（y轴动），朝上（x轴动）进行倾斜的。【这个我们可以看左上角的变化来决定】
实例
1.skewX(30deg) 使元素在x轴方向倾斜30度；
3、skew(30deg,10deg) 使元素沿X轴倾斜30度，沿y轴倾斜10度。
4.rotate-----旋转
概念
1.该属性值默认会让元素以当前元素的中心(X=width/2，Y=height/2) 进行旋转。
2.旋转的角度为参数所设定的值，“正数”是顺时针方向旋转，“负数”是逆时针方向旋转，单位为“deg”(角度)。
用法
只要给当前元素的css属性transform设置值为rotate就可以实现旋转了。
实例一：设置元素沿着水平的X轴进行旋转
写法：transform：rotateX( 旋转度数)
实例二：设置元素沿着垂直的Y轴进行旋转
写法：transform：rotateY( 旋转度数)
实例三：设置元素沿着垂直于xy所在平面的的Z轴进行旋转
写法：transform：rotateZ( 旋转度数)
注意：rotateZ也可直接写作rotate
5.transform组合值
如果给出组合值，那么就会按照先后顺序进行转换。
金箍棒制作：
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(1) {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: purple;
}
div:nth-child(2) {
width: 20px;
height: 200px;
border-radius: 5px;
margin-left: 50px;
background-color: blue;
transition: 2s;
background: linear-gradient(yellow 30%, red 30%, red 70%, yellow 70%);
}
div:nth-child(1):hover+div {
transform: translate(500px, 100px) rotate(720deg) scale(0.3);
/*先位移后旋转，这两个顺序不能反*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
效果图：
6.transform-origin — 变换原点
该属性用于设置变形转换元素【缩放，旋转，倾斜】的原点位置，默认为元素的中点，即除了位移无法使用外，其他的变换都可使用。
3种值类型如下：
方位英文单词
有“top”、“right”、“bottom”、“left”和“center”5个值可以使用，如：
“top left”表示左上角，
“right bottom”表示右下角，
“center center”表示默认的中点。
Web常用长度单位
如最常用的像素“px”，字符“em”，点“rem”等，如：
“16px 20px”表示旋转的轴在“X轴”的16像素，“Y轴（向下为正，向上为负）”的20像素的位置。
百分数
第一个百分数表示相对于元素宽度的百分比位置，第二个百分数表示相对于元素高度的百分比位置，如：
“0% 0%”相当于左上角，
“50% 50%”相当于默认的中点，
“100% 100%”相当于元素的右下角。
7.transform-style – 3D嵌套样式
transform-style属性规定如何在3D空间中呈现被嵌套的子元素（即：设置到祖先级元素上，如父级。然后对后代元素起效）
它主要有两个值：
flat表示所有子元素在2D平面呈现。
当值为“flat”的时候，就相当于在纸上画画，无论画功再好，画出的东西都是平面的，只是由于透视和明暗关系，有的时候看起来“很立体”罢了。
preserve-3d表示所有子元素在3D空间中呈现。
当“transform-style”的值为“preserve-3D”时更贴近我们现实中的思维，因为平时我们眼睛所看到的东西都是“3D（立体）”的，
注意：这种3d效果是无法穿透body的
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
/* body的所有子标签元素在进行3D转换时，都会应用3D效果 */
transform-style: preserve-3d;
}
section {
background: red;
}
.parent-div {
width: 30rem;
height: 30rem;
background: rebeccapurple;
}
.parent-div div {
width: 10rem;
height: 10rem;
background: rgb(120, 110, 129);
}
/* 让外层div进行3d变换 */
/* .parent-div:hover {
transform: rotateX(30deg) rotateY(30deg);
} */
/* 让最里面的div进行3d变换 */
.parent-div:hover div {
transform: rotateX(30deg) rotateY(30deg);
}
</style>
</head>
<body>
<section>
<div class="parent-div">
<div></div>
</div>
</section>
</body>
</html>