Rotate Objects Around Circle Using Css

Rotate objects around circle using CSS?

Jquery solution which works for any number of outer items.

Jquery shamelessly stolen from ThiefMaster♦ and their answer at this Q & A

var radius = 100; // adjust to move out items in and out var fields = $('.item'),  container = $('#container'),  width = container.width(),  height = container.height();var angle = 0,  step = (2 * Math.PI) / fields.length;fields.each(function() {  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);  if (window.console) {    console.log($(this).text(), x, y);  }  $(this).css({    left: x + 'px',    top: y + 'px'  });  angle += step;});

body {  padding: 2em;}#container {  width: 200px;  height: 200px;  margin: 10px auto;  border: 1px solid #000;  position: relative;  border-radius: 50%;  animation: spin 10s linear infinite;}.item {  width: 30px;  height: 30px;  line-height: 30px;  text-align: center;  border-radius: 50%;  position: absolute;  background: #f00;  animation: spin 10s linear infinite reverse;}@keyframes spin {  100% {    transform: rotate(1turn);  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div></div>

Problem with rotating a image around a circle with CSS

You have a couple options:

Undo the rotation by applying the inverse rotation after translation:

.big-circle {
  position: relative;
  border: 2px solid #d87272;
  border-radius: 50%;
  width: 500px;
  height: 500px;
}

.small-circle {
  position: absolute;
  left: calc(50% - 41px);
  top: calc(50% - 41px);
  height: 82px;
  width: 82px;
  border: 2px solid #d87272;
  border-radius: 50%;
}

.small-circle:nth-child(1) {
  transform: translateX(250px);
}

.small-circle:nth-child(2) {
  transform: rotate(90deg) translateX(250px) rotate(-90deg);
}

.small-circle:nth-child(3) {
  transform: rotate(180deg) translateX(250px) rotate(-180deg);
}

.small-circle:nth-child(4) {
  transform: rotate(270deg) translateX(250px) rotate(-270deg);
}

.small-circle img {
  width: 100%;
  border-radius: 50%;
}

<div class="big-circle">
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt="Sample Image"></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt="Sample Image"></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt="Sample Image"></a>
  <a href="#" class="small-circle">
    <img src="https://via.placeholder.com/82" alt="Sample Image"> </a>
</div>

How can I rotate an object(div) around a circle margin? Css only

You have to play with the transform-origin

#mainContent {
  position: relative;
  display: block;
  width: 100vw;
  border: none;
  margin: 0 auto;
  height: 100vh;
  overflow: visible;
  background: black;
}

#circle {
  position: absolute;
  left: 50%;
  top: 50%;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: pink;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

#element {
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  width: 20px;
  height: 60px;
  background: blue;
  transform-origin: top center;
  animation: orbit 3s linear infinite;
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

* {
  margin: 0;
}

<div id="mainContent">
  <div class="container"></div>
  <div id="circle"></div>
  <div id="element"></div>
</div>

Animate a circle around the circumference of another big circle

You must specify which coordinate the circle should rotate around. By default, this is coordinate 0,0, but you want it to orbit the center of the large circle.

In CSS, you do this with transform-origin:

#small {
    transform-origin: 60px 50px;
    animation: moveAround 2s infinite linear;
}
@keyframes moveAround {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="circles">
        <circle id="big" cx="60" cy="50" r="30" fill="white" stroke="#2493AB" stroke-width="20" />
        <circle id="small" cx="60" cy="20" r="10" fill="#EF6868" />
    </g>
</svg>

Rotating an image using css without moving around a circle

The default behaviour for a rotation transformation is to rotate the element around its center. You can change this by setting the transform-origin property.

https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

You should find the coordinates of the rotational center in an image editor.

<!DOCTYPE html>
<html>
<head>
  <style>
    .rotate { 
      animation: rotation 3s infinite linear;
      transform-origin: 50% 63.67%; // (vertical center) / (image height) * 100 = (percentage)
    }
    @keyframes rotation {
      from { transform: rotate(0deg); }
      to { transform: rotate(359deg); }
    }
  </style>
</head>
<body>
  <img src="https://cdn2.iconfinder.com/data/icons/industry-3/512/rotor-512.png" class="rotate" width="200" height="200" />
</body>
</html>

Rotate svg path around circle

I don't know why the site, that you linked to, uses a mix of HTML and SVG to make this animation. But it is certainly not a simple way of achieving this.

It is much simpler to just put the circle into the SVG also.

.circle-segment {  width: 360px;  height: 360px;}

<div class="circle-wrap">  <div class="main-circle">
    <svg class="circle-segment" class="circle-wrap"         xmlns="http://www.w3.org/2000/svg" version="1.1"         xmlns:xlink="http://www.w3.org/1999/xlink" >      <circle cx="180" cy="180" r="150" fill="#0c272e"/>      <path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"                    fill="#066a8e">        <animateTransform attributeName="transform"                           attributeType="XML"                           type="rotate"                           from="00 180 180"                           to="360 180 180"                           dur="10s"                           repeatCount="indefinite"/>      </path>        </svg>  </div></div>

Rotate Objects Around Circle Using Css