变形

  • 变形就是指通过CSS来改变元素的形状或位置
  • 变形不会影响到页面的布局，只改变自己
  • transform-origin设置变形的原点
  • transform用来设置元素的变形效果
    • 平移
      • translateX()沿着x轴方向平移
      • translateY()沿着Y轴方向平移
      • translateZ()沿着Z轴方向平移
        • Z轴平移，调整元素在Z轴的位置，正常情况就是调整元素和人眼之间的距离。
        • 距离越大，离人越近
        • 属于立体效果，默认情况下网页不支持透视的，如果需要看到这个效果，必须要设置网页的视距perspective
      • 平移元素，百分比是相对于自身计算的。移动自身宽度的百分比长度
    • 旋转
      • 通过旋转可以使元素沿着x y或z旋转指定的角度
      • rotateX()
      • rotateY()
      • rotateZ()
    • 缩放
      • scale() 双方向缩放
      • scaleX()水平方向缩放
      • scaleY()垂直方向缩放
  • 以往学的元素居中方式
    • top：0
    • left：0
    • bottom：0
    • right：0
    • margin：auto
    • 必须满足等式，auto使四个方向的外边距相等
    • 但这种方式只适用于元素的宽高确定。当大小是被内容撑开的就不适用了
  • 盒子大小不确定时，要通过变形居中
    • position: absolute;
    • left: 50%;/移动到包含块的百分比
    • top: 50%;
    • transform: translateX(-50%) translateY(-50%);/再移动自身的一半就居中了
  • 可以制作元素的一个浮动效果