移动Web——平面转换-平移

1、平面转换-平移

移动Web——平面转换-平移_第1张图片

取值

  • 像素单位数值
  • 百分比(参照盒子自身尺寸计算结果)
  • 正负均可

技巧

  • translate()只写一个值,表示沿着X轴移动
  • 单独设置X或Y轴移动距离:translateX()或translateY()

移动Web——平面转换-平移_第2张图片




    
    
    Document
    


    

2、平移实现居中效果

方法一:

移动Web——平面转换-平移_第3张图片

方法二:百分比参照盒子自身尺寸计算结果

移动Web——平面转换-平移_第4张图片

3、案例 双开门效果




    
    
    Document
    


    

你可能感兴趣的:(HTML5+css3,css,前端)