2/3D平面转换（最近整理的关于CSS的平面转换）

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

位移：

目标：使用translate实现元素位移效果
语法：transform:translate(水平移动距离,垂直移动距离)
取值：

正负均可
像素单位值
百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下
技巧：

translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

补充：

transition()//过渡属性
::before、::after伪元素显示模式为行内显示模式，加宽高不生效，可以用display，或者给浮动，宽高会生效！

位移--绝对定位居中

子绝父相：

postion:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
width:200px;
height:100px;

位移的方法：

postion:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//百分比参考盒子自身尺寸计算结果
width:200px;
height:100px;

旋转

目标：使用rotate实现元素旋转效果
语法
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点
语法：
默认圆点是盒子中心点
transform-origin: 原点水平位置原点垂直位置; //一律添加给标签本身写，不要加到hover,

取值：

方位名词（left、top、right、bottom、center） ,方位名词之间用空格隔开
像素单位数值
百分比（参照盒子自身尺寸计算）

多重转换

目标：使用transform复合属性实现多形态转换
多重转换技巧：
transform:translate() rotate()//移动距离记得注意本身距离一圈360deg 不可以颠倒顺序先位移，后旋转！如果颠倒，旋转会改变坐标轴向！也不可以拆开分别写，css相同的属性有层叠，覆盖掉了。

多重转换原理：

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

目标：使用scale改变元素的尺寸
思考: 改变元素的width或height属性能实现吗？
语法：
transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧：

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

透明度（opacity）可以看见变化过程，0-看不见 1-看得见 0~1半透明

transform 有复合属性自己伪元素两个transform会层叠，在hover的时候，transform也会层叠，所以复制一份到hover里！

.box .pic::after {
          /* 播放按钮压在图片上面 - 居中 */
          position: absolute;
          left: 50%;
          top: 50%;
          /* margin-left: -29px;
          margin-top: -29px; */
          /* transform: translate(-50%, -50%); */

          content: '';
          width: 58px;
          height: 58px;
          background-image: url(./images/play.png);

          /* 大图 */
          transform: translate(-50%, -50%) scale(5);

          /* 透明,看不见 */
          opacity: 0;
          transition: all .5s;
      }

      /* lihover的时候,  谁变小pic::after */
      .box li:hover .pic::after {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
      }

渐变

渐变背景：

目标：使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

语法：

 /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); *///用的不多 
background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );//透明度