CSS變換偏移量隨文本長度而變化

Question

我已經設置了一個帶有5個浮動<div>的演示 ，其中旋轉的文本長度不一。 我想知道是否有辦法讓CSS類可以處理所有文本的居中，無論長度如何。 目前，我必須為樣式表中的每個字符長度創建一個類。 這可能會變得太亂。 我還注意到，當我增加或減少包裝<div>的大小時，偏移被搞砸了。

我將通過jQuery將這些類添加到div中，但我仍然需要設置每個類以實現跨瀏覽器兼容性。

.transform3 {
    -webkit-transform-origin: 65% 100%;
    -moz-transform-origin: 65% 100%;
    -ms-transform-origin: 65% 100%;
    -o-transform-origin: 65% 100%;
    transform-origin: 65% 100%;    
}
.transform4 {
    -webkit-transform-origin: 70% 110%;
    -moz-transform-origin: 70% 110%;
    -ms-transform-origin: 70% 110%;
    -o-transform-origin: 70% 110%;
    transform-origin: 70% 110%;
}
.transform5 {
    -webkit-transform-origin: 80% 120%;
    -moz-transform-origin: 80% 120%;
    -ms-transform-origin: 80% 120%;
    -o-transform-origin: 80% 120%;
    transform-origin: 80% 120%;
}
.transform6 {
    -webkit-transform-origin: 85% 136%;
    -moz-transform-origin: 85% 136%;
    -ms-transform-origin: 85% 136%;
    -o-transform-origin: 85% 136%;
    transform-origin: 85% 136%;
}
.transform7 {
    -webkit-transform-origin: 90% 150%;
    -moz-transform-origin: 90% 150%;
    -ms-transform-origin: 90% 150%;
    -o-transform-origin: 90% 150%;
    transform-origin: 90% 150%;
}

注意：我設置的偏移值是眼球。

---

更新

雖然我希望用樣式表來處理，但我相信我必須在JavaScript中計算CSS的轉換。

我創建了以下演示來演示動態轉換。 在這個演示中，用戶可以調整.v_text類的font-size ，只要文本的長度不超過.v_text_wrapper高度，文本應該在中心垂直對齊，但請注意我有調整magicOffset值。

好吧，我只是注意到這在iOS中不起作用... 謝謝@Dinesh Kumar DJ

Answer 1

你去： http ： //codepen.io/teodragovic/pen/fgekh

#output1,
#output2{
  margin: 50px;
  display: inline-block;
}

.rotate {
  //remove this line if using js
  transform: translateY(150px) rotate(-90deg);
}

.v_text_wrapper {
  float: left;
  width: 100px;
  height: 150px;
  background: #AAA;
  border: solid #222 1px;
  padding: 0;
  margin: 0;
  position: relative;
}

#output2 .v_text_wrapper {
  height: 170px;
}

.v_text {
  color: #444;
  font-family: monospace;
  font-weight: bold;
  font-size: 1em;

  width: 150px; //remove this line if using js
  height: 100px;
  transform-origin: top left;
  text-align: center;
  position: absolute;
  display: table;
}

p {
  display: table-cell;
  vertical-align: middle;
}

不需要JS和動態的offseting。 您可以將包含文本的所有<div>設置為與包裝器相同的寬度和高度，將它們圍繞左上角（可以是任何角落）旋轉，然后使用translateY將它們放回到包裝器內（這假設包裝器尺寸始終為相同且已知的價值）。

我在文本周圍添加了額外的<p>元素，並使用此方法進行垂直居中： http ： //css-tricks.com/vertically-center-multi-lined-text/

編輯：我更新了筆，以防包裝<div>更改大小。 由於<div>是旋轉的，因此它們的高度相反，反之亦然，所以如果包裝的尺寸為100x150，那么子必須為150x100。

$('.v_text_wrapper').each(function(){
  var x = $(this).css("height");
  var text = $(this).children('.v_text');
  text.css({"transform":"translateY("+x+") rotate(-90deg)", "width":x});
});