Блог

Главная - Вопросы по программированию - Поворот стрелки в HTML от определенной точки

Поворот стрелки в HTML от определенной точки

javascript #html #css #svg

#javascript #HTML #css #svg

Вопрос:

Я выяснил, как нарисовать стрелку и повернуть ее:

      .arrow:after {
       content: "";
       display: inline-block !important;
       width: 0;
       height: 0;
       border-left: 8px solid white;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       vertical-align: middle;

     }

     .arrow:before {
       width: 75px;
       height: 2px;
       background: white;
       content: "";
       display: inline-block;
       vertical-align: middle;
     }


   <div style="transform: rotate(-60deg)";><span class="arrow"></span></div>

Но она вращается вокруг центра, тогда как я бы хотел, чтобы она вращалась снизу, например, если вы представляете стрелку с координатами (0,0), я хочу, чтобы она всегда начиналась с (0,0), но меняла свою конечную точку.

В этой ссылке они управляют этим с помощью одной стрелки, но, похоже, я не могу получить только одну вращающуюся стрелку.

Любая помощь приветствуется, спасибо!

Комментарии:

1. ссылка разорвана

2. Итак … установите начало преобразования на то, что вам нужно? Много хороших руководств по основам преобразований CSS в Интернете, любое из них охватывало бы эту часть преобразований? (Кроме того, вы, вероятно, не хотите устанавливать style атрибут, просто напишите новый класс и вместо этого назначьте его своему div. Разделите эти технологии для гораздо более эффективной разработки / отладки)

3. Эта точка с запятой помещена неправильно <div style=»transform: rotate(-60deg)»;><span class=»arrow»></span>< /div>. Это должно быть там вообще.

Ответ №1:

в разделе transform: rotate() добавить:

 transform-origin: 0% 0%;

затем измените проценты, пока они не будут соответствовать тому месту, где вы хотите, чтобы точка поворота была

Метки: