/    /  CSS transform-origin

CSS transform-origin

 

The transform-origin CSS property establishes the origin of transformation for an element. The 2d transformations can change the x-axis and y-axis of the element, whereas the 3D transformation can also change the z-axis along with the x-axis and y-axis.

 

Syntax:

 

transform-origin:  x-position | y-position | z-position | initial | inherit

 

Property Values:

 

  • x-axis : The possible values are length, percentage, left, right, and center.
  • y-axis : The possible values are length, percentage, top, bottom, and cnter.
  • z-axis :  Using the length values(not allow the percentage values).
  • initial : The property to its default value.
  • inherit : The property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 transform-origin Property</title>
<style>
       img {
              /* Chrome, Safari, Opera */
              -webkit-transform: rotate(30deg);
              -webkit-transform-origin: 25% bottom;
              /* Firefox */
              -moz-transform: rotate(30deg);
              -moz-transform-origin: 25% bottom;
              /* IE 9 */
              -ms-transform: rotate(30deg);
              -ms-transform-origin: 25% bottom;
              /* Standard syntax */
              transform: rotate(30deg);
              transform-origin: 25% bottom;
       }
       .box{
    margin: 50px;
    width:120px;
    height:110px;
    background: url("/examples/images/star-fish-transparent.png") no-repeat;
   }
</style>
</head>
<body>
 <h2>CSS transform-origin</h2>
      <div class="box">
      <img src="/examples/images/star-fish.png" alt="Star Fish">
  </div>
</body>
</html>

 

OUTPUT:

 

CSS transform-origin