Есть ли способ иметь процент вращения на объекте?

Question

В GIF ниже, поскольку вы можете видеть, как увеличиваю/уменьшаю размер окна, изображение слева растет и сжимается, как предполагается. То, что я сделал, включает строку внутри «обертки изображения», которую я создал. Моя цель здесь, когда изображение сжимается, у меня линия линии с ее уважаемым блоком текста, который вы видите справа. Прямо сейчас у меня есть линия, расположенная как absolute с процентными значениями для left и top. Есть ли способ настроить поворот линии для того, что я пытаюсь выполнить? Как я могу получить эту строку, чтобы соответствовать названию, независимо от того, что? Возможны ли проценты для ротации? (Я так не думаю)

Это вызывает одну из моих забот. Конечно, решение только для CSS было бы здорово, но проблема заключается в совместимости с браузерами. Если решение может быть в JavaScript, что было бы так же идеально, но я не знал, с чего начать с чего-то подобного для JS.

Любые другие предложения приветствуются.

GIF Пример: Пример

Код, используемый: https://jsfiddle.net/01sxrjkr/ * Убедитесь, что окно предварительного просмотра < 768px

Answer 1

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

.line.line-1 { 
    left: 62%; 
    top: 39%; 
    transform: rotate(14deg); 
    width: 40%; 
}