2D平面转换

2d变换

transform

• 平移

  • transform：translate(水平，垂直)；
  • 百分比参考自身计算
  • 应用：配合定位实现元素水平垂直居中

• 旋转

  • transform：rotate(30deg);

  • 正值顺时针，负值逆时针

  • 更改旋转原点

    • transform-origin：水平 垂直;

    • 方位坐标

      • left
      • top
      • center
      • right
      • bottom

• 缩放

  • transform：scale(水平倍数，垂直倍数)
  • 倍数：0-1缩小，大于1放大

• 斜切

  • transform：skewX(30deg)
  • 应用：擦亮效果

• 注意点

  • 行内元素设置转换无效
  • 如果多个转换要写到一个transform里面，用空格分开
  • 如果同时有旋转和平移属性，最好先写平移，避免先旋转影响坐标系的方位
  • transform属性有层叠性，一个样式里不能有两个transform属性

背景渐变

background-image：linear-gradient(方位，颜色，颜色)；

方位

• to right

  • 从左到右

• 45deg

  • 从左下到右上

属性选择器

语法：[]

指定属性名的属性选择器 [type] 标签中有type属性名的即可选中

指定属性名和值的属性选择器 [type="password"] 标签中有type属性名并且值为password的标签即可选中

模糊匹配

• [class*=" "] 只要在值中有指定内容即可选中
• [class^=" "] 以..开始
• [class$=" "] 以..结束