Why Is Blue Circle Not Spinning in The Center of Itself

Why is blue circle not spinning in the center of itself

You need transform-box: fill-box;

circle {  animation: grow 2s infinite;  transform-origin: center;  transform-box: fill-box;}@keyframes grow {  0% {    transform: scale(1);  }  50% {    transform: scale(0.5);  }  100% {    transform: scale(1);  }}

<svg  xmlns="http://www.w3.org/2000/svg"  width="80"  height="110"  version="1.1">  <rect    width="70"    height="100"    x="5"    y="5"    fill="white"    stroke="red"    stroke-width="10"    rx="5"  />  <circle cx="40" cy="105" r="3" fill="blue" /></svg>

CSS transform origin issue on svg sub-element

You need transform-box: fill-box;

@keyframes scaleBox {  from {transform: scale(0);}  to {transform: scale(1);}  }  #animated-box {    transform-box: fill-box;   animation: scaleBox 2s infinite;  }

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="        width: 195px;    "><defs>    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>    </defs>    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>

Spinning Svg vs Html element - not spining on axis

Add this selector with your <style>...</style> tag:

svg {
  width: 100px;
  height: 100px; 
  overflow: overlay;
}

Also, override the default transform-origin rule for rect:

rect {
  ...
  transform-origin: unset;
}

<html>
<head>
<style>

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

svg {
  width: 100px;
  height: 100px; 
  overflow: overlay;
}

rect {
  animation: spin 2s infinite linear;
  transform-origin: unset;
}

#rect {
  width: 100px;
  height: 100px;
  animation: spin 2s infinite linear;
}

</style>
</head>
<body>
<div id="rect" style="background-color: blue; border: solid thin black;"></div>
<svg xmlns="http://www.w3.org/2000/svg">
<rect width='100' height='100' fill="green" stroke="black" />
</svg>
</body>
</html>

Rotate rectangle around its own center in SVG

You just need to add half the width/height of the rectangle to get its centre.

<g transform = "translate(100, 100) rotate(45 60 60)">

See transform documentation of the rotate function for more information.

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>

add spinning effect to image

Is this anything like what you're after?

Just animating transform: translateX on the <a> tag:

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffc60b;
}

@keyframes float {
  0%,
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
  }
}

@keyframes horizontal {
  0%,
  100% {
    transform: translateX(-20px);
  }
  50% {
    transform: translateX(20px);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  animation: horizontal 10s cubic-bezier(.81,.14,.57,.73) infinite;
}

.avatar {
  position: relative;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translate(0px, 0px);
  animation: float 3s ease-in-out infinite;
}

.avatar img {
  width: 70%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<div class="container">
  <a href="https://google.com">
    <div class="avatar">
      <img src="https://i.ibb.co/2Y8J8TC/logo.png" alt="Skytsunami" />
    </div>
  </a>
</div>

Physics Body affects other nodes but node isn't moved

Turns out the SKPhysicsJointSpring doesn't allow compression and therefore can never be smaller than the size it starts with! Replace with one spring joint in the middle of the ticker that extends when the ticker rotates works perfectly.

Why Is Blue Circle Not Spinning in The Center of Itself