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 perspective-origin


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

Ví dụ

<!DOCTYPE html> <html>    <head>       <style>          #demo1 {             position: relative;             margin: auto;             height: 250px;             width: 350px;             padding: 10px;             border: 2px solid orange;             perspective: 125px;             animation: myanim 3s infinite;          }          @keyframes myanim {             70% {                perspective-origin: 5px 30%;             }          }          #demo2 {             padding: 70px;             position: absolute;             border: 2px solid black;             background-color: blue;             color: white;             transform: rotateX(30deg);          }       </style>    </head>    <body>       <h1>CSS perspective-origin property</h1>       <div id = "demo1">This is demo text in div1.          <div id = "demo2">This is demo text in div2.</div>       </div>    </body> </html>