transform translate实现位移
时间：2024-01-01
transfomr的translate函数可以让我们实现对元素的位移。位移包括以当前元素为中心绕着X轴、Y轴以及Z轴三个方向进行位置移动。
语法：transform:translate(x轴水平移动距离，Y轴垂直移动距离)
1、函数举例介绍
transform:translate(100px,50px) |
沿着X轴（右)移动100px,Y轴（下）移动50px |
transform:translate(-100px,500px); |
向左移动100px,向上移动50px（负数即反过来移动） |
transform:translate(100%,50%) |
沿着x轴自身的走100%像素,Y轴的50%像素，比如自身宽度100px高度200px,则分别移动100px、100px |
transform:translate(100px) |
沿着x轴走100px，相当于transform:translateX(100px); |
transform:translateX(100px); |
沿着X轴移动100px |
transform:translateY(100px); |
沿着Y轴移动100px |
二、示例
比如div宽高都是100px
1、transform:translate(100px,100px)：朝着左边和下边分别移动100px、100px。
、
2、transform:translate(-50%,-50%)：百分比的话是相对自身，负数则是反方向。所以这里是向左和向上分别移动50px、50px。
