translate:位移
相对自己移动
transfrom：translateX（+numberpx）在现在基础上向右移
transfrom：translateY（+numberpx）在现在基础上向下移
transfrom：translateZ（+numberpx) 在现在基础上向外移动，需要在3d空间才能观测到变化。
x往右为正，往左为负。y往下为正，往上为负。z外为正，内为负
复合：transfrom：translate(x,y)，当你使用translate不能只写一个值，否则无效。z值不能够在复合样式加入，但是可以通过transfrom：translate3d(x,y,z)
scale:缩放
transform:scale(number)整体缩放number倍
transform:scaleX(number)宽缩放number倍
transform:scaleY(number)高缩放number倍
transform:scaleZ(number)厚度缩放number倍
复合样式：transform:scale(number1，number2) 宽缩放number1倍，高缩放number2倍。与transfrom：translate(x,y)复合样式一样transform:scaleZ(number)属于3d空间下才能观测到。如果需要将三者一起实现可以通过transform:scale3d(x,y,z
rotate：旋转
rotateX(number deg)：向里为负，向外为正（3d空间才可以观测到变化）
rotateY(number deg)：向右转为正、向左转为负（3d空间才可以观察到变化）
rotateZ(number deg)：顺时针为正，逆时针为负
注：在实现transform：rotateZ（number deg）其实等价于transform：rotate（number deg），并且transform：rotate（number deg）仅能写入一个值，多值无效。
skew：斜切 单位也是角度
skewX（number deg）正值向左斜切，负值向右斜切
skewY （number deg）正值向下斜切
transform注意事项
变形操作不会影响其他操作
只能添加给块元素（行内块元素）、不能添加给内联元素
复合写法，可以同时添加多个变形操作
执行顺序：transform复合写法从后往前
translate会受到rotate、scale、skew影响
①scale对translate影响
transform:translate(100px,0) scale(0.5) ;
这个是正常顺序，元素先缩小一半，然后在在进行移动
transform: scale(0.5) translate(100px,0) ;
其实实际移动距离是50px，因为受到scale的影响，缩了50%，然后在缩放
②rotate对translate影响
transform: translate(100px,0) rotate(45deg) ;
先旋转45度，在移动100px
transform: rotate(45deg) translate(100px,0)
往右下角45度移动100px，然后在旋转
③斜切skew我感觉是正常的，，但是网上也有说也会影响，等我再琢磨琢磨
transform-origin设置transfrom变形的基点（不一定在元素内部，也可以设置在元素外部）
默认原点是center 中心 transform-origin: center center;
transform-origin: left top; （可以用单词表示）
transform-origin: 0px 100px; （x y）（可以用数字表示）
transfrm-origin:100px( 往右100px y为当前y轴中心 )
如果设置的位置超出了容器范围也是可以的
练习（1）斜切导航
效果：让导航列表斜切，并能够完美闭合
练习2变形列表
效果：当鼠标移入标题时，形成文字从右下角进入，边框从左上角进入。当鼠标移走时，边框再从左上角出去，文字从左下角出去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
position: relative;
list-style: none;
overflow: hidden;
}
li .image{
float: left;
}
li figcaption{
float: left;
}
li .box{
position: absolute;
width: 200px;
height: 100px;
top: -163px;
left: -290px;
transform: scale(0.5) skew(30deg,80deg);
border: 1px solid white;
z-index: 1;
transition: 4s ease all;
}
li .mT{
position: absolute;
z-index: 1;
font-weight: bold;
color: white;
/* bottom: -50px; */
transition: 2s ease all;
left: 290px;
bottom: -50px;
transform: scale(0.5);
}
figcaption:hover{
color: green;
}
figcaption:hover ~ .mT{
transform:translate(-180px,-120px) scale(1) ;
}
figcaption:hover ~ .box{
/* top:163px
left:290px; */
transform:translate(330px,200px) scale(1) ;
}
</style>
</head>
<body>
<h1 id="title">
学习累了，看会电影
</h1>
<aside>
<ul>
<li>
<figure>
<div class="image">
<img src="../img/7a7caf3b3bf04ee992d17dde8ffd1c77.png" >
</div>
<figcaption>
电影首映，新年档强势来袭
</figcaption>
<div class="box">
</div>
<div class="mT">
刘德华大帅
</div>
</figure>
</li>
<li>
<figure>
<div class="image">
<img src="../img/6d76b4852f49de102dbfdbe79bbdd4af.png" >
</div>
<figcaption>
电影首映，新年档强势来袭
</figcaption>
<div class="box">
</div>
<div class="mT">
刘德华大帅
</div>
</figure>
</li>
<li>
<figure>
<div class="image">
<img src="../img/8e2add6daceb4be3ba60a250bf452262.jpg" >
</div>
<figcaption>
电影首映，新年档强势来袭
</figcaption>
<div class="box">
</div>
<div class="mT">
刘德华大帅
</div>
</figure>
</li>
<li>
<figure>
<div class="image">
<img src="../img/b5ba909353b7426c8e7d923b7c903cda.jpg" >
</div>
<figcaption>
电影首映，新年档强势来袭
</figcaption>
<div class="box">
</div>
<div class="mT">
刘德华大帅
</div>
</figure>
</li>
<li>
<figure>
<div class="image">
<img src="../img/b5ba909353b7426c8e7d923b7c903cda.jpg" >
</div>
<figcaption>
电影首映，新年档强势来袭
</figcaption>
<div class="box">
</div>
<div class="mT">
刘德华大帅
</div>
</figure>
</li>
</ul>
</aside>
</body>
</html>