如何垂直对齐旋转的图像标题？

Question

我正在尝试将图像标题对齐到图像容器的左下角。

这是期望结果的图片。

这是我正在使用的 HTML/CSS：

.elementor-image figure {
    position: relative;
}

.elementor-image figure figcaption {
    position: absolute;
    bottom: 0;
    left: -40px;
    transform: rotate(-90deg);
}

<div class="elementor-image">
<figure class="wp-caption">
<img src="https://picsum.photos/200/300">                                           
<figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
</figure>
</div>

我的代码有两个问题：

1. 旋转的文本不是从左下角开始。
2. 应用 left: -40px 并不总是将文本与图像对齐（有时它会重叠在图像顶部）。

这是说明问题的另一个屏幕截图。

我希望我已经正确地解释了自己，我一直在为此苦恼，所以我非常感谢您的意见和想法。谢谢！

Answer 1

简单地考虑一下transform-origin:bottom left;

.elementor-image figure {
  position: relative;
}

.elementor-image figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin:bottom left;
}

img {
 display:block; /* to avoid white space and have a perfect alignment */
}

<div class="elementor-image">
  <figure class="wp-caption">
    <img src="https://picsum.photos/200/300">
    <figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
  </figure>
</div>