Computer >> Máy Tính >  >> Lập trình >> CSS

Tạo hoạt ảnh cho thuộc tính gốc chuyển đổi với CSS Animation

Để triển khai hoạt ảnh trên thuộc tính gốc biến đổi với CSS, bạn có thể 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>