Deformation CSS3 - rotation rotate ()

Rotation rotate () function by specifying parameters so that the angle element is rotated relative to the origin. It operates mainly in two dimensions, an angle value is used to specify the magnitude of the rotation. If this value is positive, clockwise rotation of the elements relative to the center of the origin; if the value is negative, the central element rotated counterclockwise relative to the origin. As shown below:

HTML code:

<div class="wrapper">
  <div></div>
</div>

CSS code:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}