有没有办法在对象上获得旋转百分比？

Question

根据下面的GIF，正如您所看到的那样，当我增加/减小窗口大小时，左侧的图像会增长和缩小，因为它应该如此。我所做的是在＆＃34;图像包装器内部包含线条＃34;我已经成立了。我的目标是当图像缩小时，我将线条与你在右边看到的受尊重的文本块对齐。现在，我将该行定位为absolute，其中包含left和top的百分比值。有没有办法根据我想要完成的事情来调整线的旋转？无论如何，我怎样才能让这条线与标题对齐？轮换的百分比是否可以？ （我不这么认为）

这引起了我的一个担忧。当然，只有CSS的解决方案会很棒，但关注的是与浏览器的兼容性。如果解决方案可以在JavaScript中完美，但我不知道从哪里开始为JS这样的东西。

欢迎任何其他建议。

GIF示例：

使用的代码示例：https://jsfiddle.net/01sxrjkr/ *确保预览窗口为＆lt; 768px

Answer 1

您正在从错误的一端旋转。请尝试使用此选项，然后使用媒体查询来更改每个最常见媒体宽度相对于右侧文本的旋转度数。请记住，人们不会重新调整屏幕大小，因此在每个像素宽度上完美地使用它是不必要的，而且你在那里所做的事情真的不可能。你的形象是敏感的，你的文字当然不是。因此，随着屏幕宽度的减小，左侧列的高度随着图像变小而减小，而右侧列的高度随着文本的变化而增加。

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