CSS旋转文本，同时使容器始终位于底部：0，左侧：0位置

我试图通过CSS实现以下目标：

我有一个

我可以使用以下CSS轻松地旋转文本：

.Rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

但是，文本的结尾如下所示

我理解为什么会发生这种情况，但不确定如何在全球范围内解决它。它在旋转前使用左下角。我可以单独使用每个小部件在

.title

上放置一个固定的高度/宽度，但如果可能的话。我想避免这种情况

---

有谁能提供一种解决方案，使“旋转”文本始终位于

底部：0，左侧：0

？

我个人只想用：before&:after使元素变得更复杂，但却是单数。然后我将文本放置在绝对位置内

.widget {
  height: 50px;
  width: 250px;
  background: #81a6d5;
  float: left;
  margin-left: 10px;
  color: #084ca1;
}

.widget::before {
  content: "";
  position: absolute;
  height: 50px;
  width: 35px;
  background: rgba(255,255,255,.3);
}

.widget .title {
  transform: rotate(-90deg);
  position: absolute;
  font-size: 11px;
  font-family: helvetica;
  margin-top: 15px;
}

我做这支笔是为了表达我的想法，它也会清理一下代码

---

我个人只想让元素更复杂一些，但使用：before&:after来表示单数。然后我将文本放置在绝对位置内

.widget {
  height: 50px;
  width: 250px;
  background: #81a6d5;
  float: left;
  margin-left: 10px;
  color: #084ca1;
}

.widget::before {
  content: "";
  position: absolute;
  height: 50px;
  width: 35px;
  background: rgba(255,255,255,.3);
}

.widget .title {
  transform: rotate(-90deg);
  position: absolute;
  font-size: 11px;
  font-family: helvetica;
  margin-top: 15px;
}

我做这支笔是为了表达我的想法，它也会清理一下代码

---

我想不出一种方法可以在不单独定位每个CSS的情况下普遍使用CSS，但是使用JS非常简单。如果您可以使用JS intead，那么这段代码应该自己处理，而不需要更改任何当前的HTML或CSS

$(function(){
    $('.rotate').each(function(){

        var thisTitle = $(this);
        var w = thisTitle.outerWidth();
        var h = thisTitle.outerHeight();

        var newLeft = Math.abs((w - h) / 2) * -1;
        var newBottom = Math.abs((w - h) / 2);

        thisTitle.css('left', newLeft);
        thisTitle.css('bottom', newBottom);

    });

});

---

Codepen:

我想不出一种方法，可以在不单独定位每个CSS的情况下使用CSS来实现这一点，但是使用JS非常简单。如果您可以使用JS intead，那么这段代码应该自己处理，而不需要更改任何当前的HTML或CSS

$(function(){
    $('.rotate').each(function(){

        var thisTitle = $(this);
        var w = thisTitle.outerWidth();
        var h = thisTitle.outerHeight();

        var newLeft = Math.abs((w - h) / 2) * -1;
        var newBottom = Math.abs((w - h) / 2);

        thisTitle.css('left', newLeft);
        thisTitle.css('bottom', newBottom);

    });

});

---

代码笔：

您可以将原点设置为左下角，然后在旋转之前对元素应用平移

-webkit-transform: rotate(-90deg) translateY(100%);
-webkit-transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;

可以说，翻译使左上角成为您想要的位置

---

要解释它是如何工作的并不容易。。。只需尝试一下即可

您可以将原点设置为左下角，然后在旋转之前对元素应用平移

-webkit-transform: rotate(-90deg) translateY(100%);
-webkit-transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;

可以说，翻译使左上角成为您想要的位置

---

要解释它是如何工作的并不容易。。。尝试一下吧

Creative，我无法决定是否使用.js。这取决于你想如何使用它。如果标签的高度和宽度是恒定的，你可以通过css来做，但是如果大小不同，你不想单独做每个标签，你需要使用js。长边总是需要偏移长边减去短边负片大小的一半，而短边则需要将长边减去短边的负片大小的一半加到它上面。如果大小总是一样的，你可以自己计算，但是css没有访问这些值的权限。目前，这两个“小部件”是计划中的唯一两个，但我确实喜欢解决方案。在这种情况下，如果是我，而你对js和JQuery没有其他用途，我可能只会计算并硬编码它们。我想很多人都会不同意，但对我来说，对关闭JS的人来说，硬编码两个变量要比担心回退要好。可能会保存注释掉的代码或其他东西，以防将来标签数量增加。创造性，我无法决定是否使用.js。这实际上取决于你想如何使用它。如果标签的高度和宽度是恒定的，你可以通过css来做，但是如果大小不同，你不想单独做每个标签，你需要使用js。长边总是需要偏移长边减去短边负片大小的一半，而短边则需要将长边减去短边的负片大小的一半加到它上面。如果大小总是一样的，你可以自己计算，但是css没有访问这些值的权限。目前，这两个“小部件”是计划中的唯一两个，但我确实喜欢解决方案。在这种情况下，如果是我，而你对js和JQuery没有其他用途，我可能只会计算并硬编码它们。我想很多人都会不同意，但对我来说，对关闭JS的人来说，硬编码两个变量要比担心回退要好。也许可以保存注释掉的代码或其他东西，以防将来标签数量增加。天哪，你真是个巫师哇。这真是令人印象深刻，我不认为这仅仅是CSS是可行的。神圣的烟雾，你是一个巫师哇。这真是令人印象深刻，我不认为这将是可行的，只是CSS。