平面转换

位移：translate

translate:参照初始的位置进行移动

1. 语法：transform: translate(水平移动距离, 垂直移动距离);

2. 取值（正负均可）

   • 像素单位数值：px

   • 百分比（参照物为盒子自身尺寸）

     translate()如果只给出一个值, 表示x轴方向移动距离

     单独设置某个方向的移动距离：translateX() & translateY()

     小括号里面多个值，用英文逗号隔开

3. 位移-绝对定位居中

   
           
   水平垂直居中
       
   

   .father {
               position: relative;
               width: 300px;
               height: 300px;
               background-color: #ccc;
           }
           .son {
               position: absolute;
               left: 50%;
               top: 50%;
               /* translate：可以不考虑子元素的宽高，由浏览器自行计算 */
               transform: translate(-50%,-50%);
               background-color: #f00;
           }
   

旋转: rotate

1. 语法 transform: rotate(角度);

   注意：角度单位是deg

   • 取值为正, 则顺时针旋转
   • 取值为负, 则逆时针旋转

2. 转换原点:transform-origin

   • 作用： 改变转换原点

   • 语法：transform-origin: 原点水平位置 原点垂直位置;

     （默认原点是盒子中心点）

   • 取值

     1.方位名词，left right center top bottom，默认center center

     2.两个像素值，x,y

     3.百分比：参考自身

多重转换

多重转换先写位移，再写旋转，因为旋转会改变坐标轴向

transform:translate(800px) rotate(360deg)

缩放： scale

1. 语法：transform: scale(x轴缩放倍数, y轴缩放倍数);

2. 为scale设置一个值, 表示x轴和y轴等比例缩放

   transform: scale(缩放倍数);

   cale值大于1表示放大, scale值小于1表示缩小

注意：

1. 行内元素不能使用转换，脱标（浮动，绝对定位，固定定位）或转模式（block，inline-block）后可使用

2. 百分比参考自身还是父元素：

   c s s1,css2参考父元素c s s3参考自身

   参考父元素：width, height,margin,padding,定位的top, bottom,right,left

   参考自身：transform, background-size,border-radius