MENU


Transformation

transform
: none: no transformation.
:perspective(100px): the perspective view.
:translate(10px,-20px): 2D translation.
:translate3d(10px,-20px,30px): 3D translation.
:translateX(10px): translates along the X-axis.
:translateY(20px): translates along the Y-axis.
:translateZ(-10px):translates along the Z-axis.
:scale(1,2): 2D scaling.
:scale3d(1,2,3): 3D scaling.
:scaleX(3): scaling along the X-axis.
:scaleY(3): scaling along the Y-axis.
:scaleZ(3): scaling along the Z-axis.
:rotate(10deg): 2D rotation.
:rotate3d(1,2,3,10deg): 3D rotation around (1,2,3).
:rotateX(10deg): rotation around the X-axis.
:rotateY(10deg): rotation around the Y-axis.
:rotateZ(10deg): rotation around the Z-axis.
:skew(10deg,20deg): 2D skewing.
:skewX(10deg): skewing along the X-axis.
:skewY(10deg): skewing along the Y-axis.
:perspective(500px) translate(10px, 0, 20px) rotateY(3deg): applies multiple transformations
:matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16): 3D matrix transformation.
:matrix(1,2,3,4,5,6): 2D matrix transformation.

transform-origin (with the 'transform' property)
:left top: changes the origin of transformation
:10% bottom 10px: changes the origin of transformation.

transform-style (with the 'transform' property)
:flat: does not preserve the 3D positions of the child elements.
:preserve-3d: preserves the 3D positions of the child elements.

transform-box (with the 'transform' property)
: content-box
: border-box
: fill-box
: stroke-box
: view-box

perspective
:none: no perspective view set.
:100px: places 100 pixels from the view.

perspective-origin (with the 'perspective' property)
:30% bottom: changes the origin of the perspective
: right center


RESETRUNFULL
<!DOCTYPE html><html><head>
   <style>
      div {
         left:100px;
         padding:30px;
         position: absolute;
         border: 1px solid black;
         background-color: yellow;
         transform: rotate(25deg);
         transform-origin:20% 20%;
      }
   </style></head>
<body style="height:200px">
   <div id="div1">
      <div id="div2">
         Testing
      </div>
   </div>
</body></html>