Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Animate transform-origin property with CSS Animation
To implement animation on the transform-origin property with CSS, you can try to run the following code
Example
<!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>
Updated on: 2020-06-25T14:44:43+05:30
1K+ Views
Advertisements