1. 实现元素位移

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

• 取值：像素或百分比单位

• 使用transform快速实现绝对定位的元素居中效果

  • 核心代码块

     position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    

2.实现元素旋转rotate

• 语法

  • transform: rotate(角度);

    注意：角度单位是deg

• 取值可为正负（正为顺时针旋转，负反之）使用transform-origin属性改变转换原点

3.使用transform-origin属性改变转换原点

• 语法

  • 默认圆点是盒子中心点

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

• 取值

  • 方位名词（left、top、right、bottom、center）

  • 像素单位数值

  • 百分比（参照盒子自身尺寸计算）

4.使用transform复合属性实现多形态转换

• 多重转换原理

             transform: translate(200px) rotate(360deg);
  

  • 旋转会改变网页元素的坐标轴向

  • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

5.缩放 (scale)

• transform: scale(缩放倍数);

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

渐变 linear-gradient

1. background-image属性实现渐变背景效果

   1. 语法：

      background-image: linear-gradient(to right,red , black);
      

结束语：

爱笑的人运气不会差喔