Итак, я использую CSS для поворота некоторого текста с горизонтальной на вертикальную (90 градусов) следующим образом:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;
Моя проблема заключается в том, что это перемещает текстовый путь вне контейнера div. Есть ли уловка, чтобы держать ее внутри контейнера? Есть ли какая-то опорная точка, которую я мог бы установить? Что такое способ перекрестного браузера для настройки сообщения?
Вы можете вернуть его с помощью нескольких свойств CSS...
#whatever {
position: relative;
top: -4px;
right: -10px;
}
В качестве альтернативы вы можете играть с transform-origin:
transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
Альтернативный метод, который более совместим с браузером и не нуждается в информации о количестве текста:
.disclaimer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
line-height: 15px;
height: 15px;
width: 15px;
overflow: visible;
white-space: nowrap;
}