Deformation in CSS3 - skew distortion ()

Skew distortion () function allows the display element is inclined. It may be an object around the X-axis and Y-axis center position thereof inclined at a certain angle. This rotate () function different rotation, rotate () function simply rotates without changing the shape of the element. skew () function does not rotate, but only the shape change elements.

Skew () has three cases:

1, skew (x, y) at the same time that the twist element (X-axis and Y-axis simultaneously with a certain angle distortion value) in the horizontal and vertical directions;

The first parameter corresponds to the X-axis, Y-axis corresponds to the second parameter. If the second parameter is not provided, the value is 0, i.e. no chamfered Y-axis direction.

2, skewX (x) only the distortion elements in the horizontal direction (X-axis distortion);

3, skewY (y) only the distortion elements in the vertical direction (Y-axis distortion)

Example shows:

By skew () function into a rectangular parallelogram.

HTML code:

<div class="wrapper">
  <div>我变成平形四边形</div>
</div>

CSS code:

.wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}
.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform:skew(45deg) 
  transform:skew(45deg);
}