W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: lightgreen; border: 2px solid black; padding: 10px; } #myDiv1 { transform: translate(50px); /* 沿 x 轴移动元素 50 像素，沿 y 轴移动 0 像素 */ } #myDiv2 { transform: translate(50px, 20px); /* 沿 x 轴移动元素 50 像素，沿 y 轴移动 20 像素 */ } #myDiv3 { transform: translate(100px, 30px); /* 沿 x 轴移动元素 100 像素，沿 y 轴移动 30 像素 */ } </style> </head> <body> <h1>translate() 函数</h1> <div> 这是一个普通的 div 元素。 </div> <div id="myDiv1"> Div1。 </div> <div id="myDiv2"> Div2。 </div> <div id="myDiv3"> Div3。 </div> </body> </html>