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>

实际上我不认为是否可以只旋转没有内容的容器。内容始终取决于容器的属性...

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

1 个答案: