Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Tạo hiệu ứng chuyển động cho thuộc tính CSS transform-origin


Để thực hiện animation trên thuộc tính transform-origin với CSS, bạn có thể chạy đoạn mã sau:

Ví dụ

<!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 property</h1>       <div id = "demo1">          <div id="demo2">Demo</div>       </div>    </body> </html>