Повернуть круг относительно своей оси

[fori]

Етот код вращает круг оносительно своей оси, чтоб задать ось вращения можно использовать transform-origin

<svg width="220" height="220" padding="0">
<circle class="myCircle"/>
</svg>
  <style>
  .myCircle {
  margin:0;
  cx:110;
cy:110;
r:100;
transform-origin: center;
transform: rotate(-60deg);
  fill: none;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: calc(2*3.14*100);
  transition: stroke-dashoffset 1s;
}
svg:hover{
stroke-dashoffset: calc(2*3.14*100);
}
  </style>

[рони]

своей оси

своя это которая?

[рони]

fori,
может вы хотели это
https://www.w3schools.com/howto/howto_css_flip_card.asp

[рони]

fori,
или так ...

<svg width="200px" height="200px">
<circle class="myCircle"/>
</svg>
    <style>
    .myCircle {
        cx: 95;
        cy: 95;
        r: 85;
        transform-origin: 95px;
        transform: rotate(60deg);
        fill: none;
        stroke: #333;
        stroke-width: 20;
        stroke-dasharray: 534;
        transition: stroke-dashoffset 1s;
    }
    svg:hover {
        stroke-dashoffset: 534;
    }
    </style>

[fori]

Спасибо, то что нужно))
Позвольте спросить как изменять stroke-dasharray напримеор в hover
К примеру етот код переносит черную полоску вверх, как сделать так чтоб ета полоска уменьшалась при перетягивании вверх по 2д-окружности относительно центра

<svg width="220" height="220" padding="0">
<circle class="myCircle"/>
</svg>
  <style>
  .myCircle {
  margin:0;
  cx:110;
cy:110;
r:100;
transform-origin: center;
transform: rotate(-60deg);
  fill: none;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: calc(2*3.14*100/3) calc(2*3.14*100*2 /3);
  transition: stroke-dashoffset 1s;
}
svg:hover{
stroke-dashoffset: calc(2*3.14*100/3);
stroke-dasharray: 0 calc(2*3.14*100); //не работает
}
  </style>

[рони]

fori,
svg:hover .myCircle

<svg width="220" height="220" padding="0">
<circle class="myCircle"/>
</svg>
    <style>
    .myCircle {
    margin:0;
    cx:110;
cy:110;
r:100;
transform-origin: center;
transform: rotate(-60deg);
    fill: none;
    stroke: #333;
    stroke-width: 20;
    stroke-dasharray: calc(2*3.14*100/3) calc(2*3.14*100*2 /3);
    transition: 1s;
}
svg:hover .myCircle{
stroke-dashoffset: calc(2*3.14*100/3);
stroke-dasharray: 0 calc(2*3.14*100);
}
    </style>

[fori]

Спасибо, позвольте спросить, насколько правильный подход у создании такой анимации у мненя, или можно было выбрать лучшый подход

<svg width="220" height="220" padding="0">
	<circle class="myCircle" />
</svg>
<style>
	.myCircle {
		margin: 0;
		cx: 110;
		cy: 110;
		r: 100;
		transform-origin: center;
		stroke-dashoffset: calc(2*3.14*100/3);
		stroke-dasharray: 0 calc(2*3.14*100);
		transform: rotate(180deg);
		fill: none;
		stroke: #333;
		stroke-width: 20;
		transition: 1s;
	}
	svg:hover .myCircle {
		transform: rotate(60deg);
		stroke-dasharray: calc(2*3.14*100/3) calc(2*3.14*100*2 /3);
	}
</style>

[рони]

fori,
в тег форматирования добавьте html run height=500