<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 平移 */
.c1{
width: 200px;
height: 200px;
border: 2px dashed;
/* transform: translateX(100px);向x轴移动100px 正右负左 */
transform: translateY(100px); /* 向y轴移动 正上负下 */
}
.d2{
width: 200px;
height: 200px;
background: red;
transform: translate(100px,100px);/* 向x,y轴各移动100px,如果省略y轴的偏移量默认为0 */
}
</style>
</head>
<body>
<div class="c1">
<div class="d2"></div>
</div>
</body>
</html>