- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
How to Move an Element in a Circular Path with CSS?
CSS animations can help us transform elements in various ways by combining, rotating and translate.
The following examples illustrates how we can move an element in circular path.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8%;
width: 35px;
height: 35px;
border-radius: 5px;
background: red;
animation: move 3s infinite linear;
}
@keyframes move {
0% {
transform: rotate(0deg) translateX(40px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(40px) rotate(-360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output
This will produce the following result −
Updated on 13-Mar-2021 12:38:51
- Related Questions & Answers
- How to Move an Element in a Circular Path with CSS offset-path (Motion Path)?
- Move an HTML div in a curved path
- How to move an element of an array to a specific position (swap)?
- How to style an hr element with CSS?
- How to create rounded and circular images with CSS?
- How to display an element on hover with CSS?
- Python program to search an element in a Circular Linked List
- How to zoom/scale an element on hover with CSS?
- How to center an element vertically and horizontally with CSS?
- How to create a sticky element with CSS?
- How to apply a 2D or 3D transformation to an element with CSS
- Hide an element from view with CSS
- How to maintain the aspect ratio of an element with CSS?
- How to remove the border from an editable element with CSS?
- Set the image path with CSS
Advertisements