Usage of transform-origin property with CSS

Use the transform-origin property to change the position on transformed elements with CSS.


You can try to run the following code to learn how to work with transform-origin property with CSS

Live Demo

<!DOCTYPE html>
         .demo1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
         .demo2 {
            width: 200px;
            height: 200px;
            background-color: orange;
         .demo3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(10deg);
            transform-origin: 30% 40%;
      <div class = "demo1">Demo
         <div class = "demo2">Demo
            <div class = "demo3">