Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.02.2021, 15:24
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Повернуть круг относительно своей оси
Етот код вращает круг оносительно своей оси, чтоб задать ось вращения можно использовать 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, 04.02.2021 в 16:00.
Ответить с цитированием
  #2 (permalink)  
Старый 04.02.2021, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от fori
своей оси
своя это которая?
Ответить с цитированием
  #3 (permalink)  
Старый 04.02.2021, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,
может вы хотели это
https://www.w3schools.com/howto/howto_css_flip_card.asp
Ответить с цитированием
  #4 (permalink)  
Старый 04.02.2021, 15:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2021, 16:07
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, то что нужно))
Позвольте спросить как изменять 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>
Ответить с цитированием
  #6 (permalink)  
Старый 04.02.2021, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #7 (permalink)  
Старый 04.02.2021, 22:27
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, позвольте спросить, насколько правильный подход у создании такой анимации у мненя, или можно было выбрать лучшый подход
<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>
Ответить с цитированием
  #8 (permalink)  
Старый 04.02.2021, 23:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы каждый объект крутился вокруг своей оси? Katy93 Общие вопросы Javascript 0 29.07.2020 01:37
Как заставить часть SVG вращаться вокруг своей оси? drkrol Общие вопросы Javascript 1 04.12.2019 23:13
вращение вентилятора вокруг своей оси Nailya Элементы интерфейса 3 18.04.2014 10:48
Поворот блока вокруг своей оси MR.TOR Events/DOM/Window 5 01.07.2013 18:36
поворот вокруг своей оси IE 10 imediasun1 Элементы интерфейса 0 26.04.2013 21:38