html - 如果旋转了父容器，如何不旋转文本

Question

我旋转了一段包含一些文本的内容(红色 div)，但在旋转容器时，它也会旋转文本。如何只旋转 div 而不旋转文本？

在设置中，HTML 可能不允许更改，所以如果解决方案只能包含 CSS 就好了。不确定如何在这里分离旋转。感谢您的帮助。

a {
    position: relative;
    padding: 0;
}
a .main-link-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #c0392b;
    left: 0;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 25px;
    font-size: 2.5em;
    text-decoration: underline;
    font-weight: 700;
    color: #fff;
    transform: rotate(5deg);
}
img { width: 100% }

<a href="#">
  <span>
    <img src="https://www.safaribookings.com/blog/wp-content/uploads/2017/05/What-todo-Encounter-Elephant-BW_1200px.jpg" alt="image-rawpixel-761473-unsplash.png">
  </span>
  <span class="main-link-text">
    Text to NOT rotate
  </span>
</a>

Answer 1

无 html 更改:

a {
    position: relative;
    padding: 0;
}
a .main-link-text {
    min-width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 25px;
    font-size: 2.5em;
    text-decoration: underline;
    font-weight: 700;
    color: #fff;
    z-index: 10;
}
a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #c0392b;
    transform: rotate(5DEG);
    display: block;
    width: 100%;
    height: 60px;
    z-index: 5;
}
img { width: 100% }

<a href="#">
  <span>
    <img src="https://www.safaribookings.com/blog/wp-content/uploads/2017/05/What-todo-Encounter-Elephant-BW_1200px.jpg" alt="image-rawpixel-761473-unsplash.png">
  </span>
  <span class="main-link-text">
    Text to NOT rotate
  </span>
</a>

解决方法可以是:

a {
    position: relative;
    padding: 0;
}
a .main-link-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #c0392b;
    left: 0;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 25px;
    font-size: 2.5em;
    text-decoration: underline;
    font-weight: 700;
    color: #fff;
    transform: rotate(5deg);
}
a .main-link-text-back {
    transform: rotate(-5deg);
}
img { width: 100% }

<a href="#">
  <span>
    <img src="https://www.safaribookings.com/blog/wp-content/uploads/2017/05/What-todo-Encounter-Elephant-BW_1200px.jpg" alt="image-rawpixel-761473-unsplash.png">
  </span>
  <span class="main-link-text">
    <span class="main-link-text-back">Text to NOT rotate</span>
  </span>
</a>

实际上我不认为是否可以只旋转容器而不旋转内容。内容总是取决于容器属性...