transform实现位移-第二十一天

平面转换

目标:使用transform属性实现元素的位移、旋转、缩放等效果

• 平面转换
  • 改变盒子在平面内的位置形态(位移、旋转、缩放)
  • 2D转换
• 平面转换属性
  • transform

位移

• 语法
  • transform:teanslate(水平移动距离,垂直移动距离)
• 取值(正负均可)
  • 参照元素的原始坐标进行偏移,不会影响其他元素
  • 像素单位数值
  • 百分比(参照物为盒子自身尺寸)
  • 注意:X轴正向为右,Y轴正向为下
• 技巧
  • translate()如果只给出一个值,表示x轴方向移动距离
  • 单独设置某个方向的移动距离:translateX()&translateY()

位移-绝对定位居中

目标:使用translate快速实现绝对定位元素的居中效果

• 实现方法

  position:absolute;
  left:50%;
  top:50%;
  /*如果有明确的宽高,使用margin*/
  /*margin-left:-100px;
  margin-top:-50px;*/
  transform:tranlate(-50%,*50%);
  

双开门案例