代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动元素</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: #abcdef;
border:3px solid #f80;
}
.box2{
-webkit-transform: translate(20px,30px);
transform: translate(20px,30px);
-webkit-transform:translate(-20px,-30px);
transform:translate(-20px,-30px);
-webkit-transform:translate(20px);
transform:translate(20px);
}
.box3{
-webkit-transform:translate(50%,50%);
transform:translate(50%,50%);
}
.box4{
-webkit-transform: translateX(20px);
transform: translateX(20px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transform:translateX(20px) translateY(30px);
transform:translateX(20px) translateY(30px);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>核心；往xy轴移动
