transform-origin - HTML CSS CSS Property

HTML CSS examples for CSS Property:transform-origin

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transform-origin

Description

The transform-origin CSS property sets the origin of transformation for an element.

The following table summarizes the transform-origin Property.

Item Value
Default value: 50% 50% 0
Applies to:Transformable elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

Value Description
x-position Represents the horizontal position (or offset) of the transform origin.
y-position Represents the vertical position (or offset) of the transform origin.
z-position A length value describing how far from the user eye the origin is set for 3D transforms. Percentage values are invalid.
initialSets this property to its default value.
inherittake the value of its parent element transform-origin property.

x-position can have one of the following values:

  • percentage - Defines the offset relative to the width of the element.
  • length - Defines the offset using a length value.
  • left - Equal to 0% or a zero width.
  • center - Equal to 50% or half the width of the box. right - Equal to 100% or the full box width.

y-position can have one of the following values:

  • percentage - Defines the offset relative to the height of the element.
  • length - Defines the offset using a length value.
  • top - Equal to 0% or a zero height.
  • center - Equal to 50% or a half the height of the box. bottom - Equal to 100% or the full box height.

The example below shows the transform-origin property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 transform-origin Property</title>
  <style type="text/css">
  img {<!--   w  w w.j a va 2s  . co  m-->
    /* 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("../images/star-fish-transparent.png") no-repeat;
    }
</style>
 </head>
 <body>
  <div class="box">
   <img src="../images/star-fish.png" alt="Star Fish">
  </div>
 </body>
</html>

Related Tutorials