Perform Animation on CSS perspective property



To implement animation on perspective property with CSS, you can try to run the following code

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          #demo1 {             position: relative;               margin-left: 120px;             height: 250px;             width: 350px;             padding: 10px;             border: 1px solid orange;             animation: myanim 3s infinite;             perspective: 200px;          }          @keyframes myanim {             50% {                perspective: 100px;             }          }          #demo2 {             padding: 90px;             position: absolute;             border: 1px solid black;             background-color: orange;             transform: rotateX(60deg);          }       </style>    </head>    <body>       <div id = "demo1">This is demo text in div1.          <div id = "demo2">This is demo text in div2.</div>       </div>    </body> </html>
Updated on: 2020-06-25T15:00:07+05:30

144 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements