Deformation in CSS3 - displacement translate ()

translate () function can be moved in the direction of the specified element, similar to the position of the relative. Or simply interpreted as using translate () function, the element can be moved from its original position, without affecting any Web components X, Y axis.

We translate divided into three cases:

1, translate (x, y) in the horizontal direction and a vertical direction while moving (i.e. X-axis and Y-axis movement at the same time)

2, translateX (x) only horizontal movement direction (X-axis)

3, translateY (Y) to move only in the vertical direction (Y axis movement)

Examples demonstrate: The translate () function element is moved downward 50px Y-axis, X-axis rightward movement 100px.

HTML code:

<div class="wrapper">
  <div>我向右向下移动</div>
</div>

CSS code:

.wrapper {
  width: 200px;
  height: 200px;
  border: 2px dotted red;
  margin: 20px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: orange;
  color: #fff;
  -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);
}