详解：56 transform: translate_综合

<!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轴移动