Coding Tree

外观

平面转换 transform ​

使用 transform 实现位移、旋转、缩放等效果

平面坐标

   -y
-x  0  +x
   +y

位移 translate ​

语法

css
transform: translate(水平移动距离，垂直移动距离);

取值

  • 正负均可
  • 像素单位数值
  • 百分比（参照盒子自身大小）

配合过渡使用

css
transition: all 0.5s;

示例：(元素居中效果)

技巧

  • translate 只给一个值，表示 x 轴方向移动距离
  • 单独设置某个方向的移动：translateX(), translateY()
css
/* 背景图从右显示 */
background-position: right 0;

示例：双开门

旋转 rotate ​

语法

css
transform: rotate(角度);

角度单位deg, 正负数均可

  • 正数：顺时针
  • 负数：逆时针

示例：

改变转换原点 transform-origin ​

默认的旋转原点是盒子中心点

语法

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

取值

  • 方位名词 top left right bottom center
  • 像素单位数值
  • 百分比（参照盒子自身尺寸）

示例：

多重转换 ​

css
/* 复合属性 先后顺序不一样，效果也不一样 */
transform: translate() rotate();

示例：边走边转

缩放 scale ​

实现元素从中心点缩放效果

语法

css
transform: scale(x轴缩放倍数, y轴缩放倍数);

/* x、y等比例缩放 */
transform: scale(缩放倍数);
效果取值示例
放大数值>1scale(1.2)
不变数值=1scale(1)
缩小数值<1scale(0.8)

示例：

https://www.bilibili.com/video/BV1xq4y1q7jZ?p=19&spm_id_from=pageDriver

渐变背景 background-image ​

示例 1：

示例 2：