কম্পিউটার টিউটোরিয়াল

CSS অ্যানিমেশন দিয়ে transform-origin প্রপার্টি অ্যানিমেট করুন


CSS-এ transform-origin প্রপার্টিতে অ্যানিমেশন প্রয়োগ করতে নিচের কোডটি চালান:

উদাহরণ

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo1 {
        position: relative;
        height: 300px;
        width: 400px;
        border: 2px solid black;
        margin: 100px;
        padding: 5px;
      }
      #demo2 {
        padding: 30px;
        position: absolute;
        border: 1px solid black;
        background-color: orange;
        transform: rotate(45deg);
        transform-origin: 30% 10%;
        animation: mymove 3s infinite;
      }
      @keyframes mymove {
        30% {
          transform-origin: 0 0 0;
        }
      }
    </style>
  </head>
  <body>
    <h1>CSS transform-origin প্রপার্টি</h1>
    <div id="demo1">
      <div id="demo2">Demo</div>
    </div>
  </body>
</html>

  1. CSS padding-right প্রপার্টি অ্যানিমেট করুন

  2. CSS top প্রপার্টি অ্যানিমেশন সহ

  3. CSS অ্যানিমেশন দিয়ে transform প্রপার্টি অ্যানিমেট করুন

  4. CSS অ্যানিমেশন দিয়ে vertical-align প্রপার্টি অ্যানিমেট করুন