Deformation in CSS3 - origin transform-origin

Any element has a center point, under default, which is resident at the central point of the elements X and Y axes 50%. As shown below:

In the absence of the reset transform-origin element to change the position of the origin, CSS, the rotation of the deformation, displacement, scaling, distortion and other operations are in their center position of the element is deformed. But many times, we can be the origin of the elements by changing the position transform-origin, the origin is not in the center position of the element element to achieve the desired position of origin.

transform-origin similar background-position value setting element and the value of the background, as shown in the following table:

Example shows:

45 degree rotation through the origin element to change the transform-origin to the upper left corner, and then forward.

HTML code:

Origin in the default position

Reset origin to the upper left corner

CSS code:

.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}