Rotate div at Corner CSS 3 transform

CSS 3 rotate() transform property rotate’s div consider axis of rotation at center. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

In above example, we have used keyframe animation with rotate transform. Div is rotating with axis of rotation at center. To rotate div at one of the corner like clock’s hand, use transform-origin property of CSS 3. This property shift’s axis of rotation at corner depends on what value we are giving. This will shifts axis of rotation to right side of div. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
    transform-origin:100% 100%;
   -webkit-transform-origin:100% 100%;
   -ms-transform-origin:100% 100%;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>