<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2D转换</title> <style> /* translate 不会影响其他的元素 对行内元素无效 */ div { height: 200px; width: 200px; } div:nth-child(1) { background-color: salmon; /* transform: translate(100px, 100px); */ transform: translate(50%, 50%); /* 自己尺寸的 50% */ } div:nth-child(2) { background-color: slateblue; } </style> </head> <body> <div>1</div> <div>2</div> </body> </html>