CSS? ???? ??? ?? ?? ??: ?? ???

? ????? ??? ?? ??? ???? ??? ?????. CSS? ??? ?? ??. ??? ?? ?? ??? ??? ???? ??? ?? ??? ??? ? ?? ??? Jquery ???? ??? ????.

?? ???? ??

CSS? ?? ??? ?????. ?? ?? ??? ???? ??? ??? ??? ??? ? ????. RotateZ(angle) ??? Z?? ???? ??? ???? ??? ?? ??? ?????.

?? ? ??

??? ???? ?? ??? ?????. ?? HTML ? CSS ??:

<div class="outCircle">
  <div class="rotate">
    <div class="inner">hello</div>
  </div>
</div>

.outCircle {
  width: 200px;
  height: 200px;
  left: 270px;
  position: absolute;
  top: 50px;
  border-radius: 100px;
}
.rotate {
  width: 100%;
  height: 100%;
  -webkit-animation: circle 10s infinite linear;
}
.inner {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: red;
  display: block;
}
@-webkit-keyframes circle {
  from {
    -webkit-transform: rotateZ(0deg)
  }
  to {
    -webkit-transform: rotateZ(360deg)
  }
}

? ??? ?? ??? ??? ????? ?????. ??? ?? ??? ????? ???? ?? ???? ? ????.

?? ??? ?? Jquery ???

?? ??? ???? ??? ? ??? ??? ?????? ??? ??? ??????. ?? Jquery ???? ? ??? ???? ?????.

var radius = 100;
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);
  $(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);
  }
}

???? ?? ??:

• ?? ?? ??: Jquery ????? ??? ??? ???? ?? ??? ??? ?????? ???????. ??.
• ??? ?? ?: ?? ?? ??? ?? ??? ???? ???? ??? ?? ?? ??? ?????.
• ??? ??: ????? ?? ??? ???? ????? ?????. ?.
• ??? ??: ??? ?? ??? ?? ??? ?? ??? ?? ??? ? ????.

??

CSS? ???? ? ?? ?? ??? ???? ?? ???? ??? ? ??? ? ??? ??? Jquery ???? ???? ????? ??? ?????. ????. ???? ? ? ?? ????? ??? ???? ?? ?????? ?? ?? ? ????.

? ??? CSS? jQuery? ???? ? ?? ?? ??? ????? ????? ??? ?? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!