是否可以通过使用这种过渡来移动此div？

Question

* {margin: 0;}
	
		div {background-color:pink;
			height:200px;
			width: 200px;
			margin: 50px auto;
			position:relative;
			transition: transform 2s;
			}


		p {
			text-transform: uppercase;
		}

		div:hover {
			transform: translate(200px 200px);
		}

	<div><p>This is  text</p></div>

您好，我一直在尝试将这个div悬停在div的右侧200px和底部400px。但这似乎对我不起作用。我已经尝试过transition：transform 2s和transition：translate 2s。但是它们似乎都不起作用。有什么办法可以移动它，或有其他选择吗？预先感谢。

Answer 1

您需要在转换值之间添加逗号。

* {margin: 0;}
	
div {
  background-color:pink;
  height:200px;
  width: 200px;
  margin: 50px auto;
  position:relative;
  transition: transform 2s;
  }


p {
  text-transform: uppercase;
}

div:hover {
  transform: translate(200px, 200px);
}

<div><p>This is  text</p></div>