Это дизайн, над которым я сейчас работаю: http://alpha.bounde.co.uk
так как вы можете видеть, что каждый из ленточных ящиков имеет заголовок окна как вертикальный текст (о, работа, контакт), и я пытаюсь найти лучший способ разместить их, чтобы я мог иметь любой текст любой длины, и он появится вниз по левой стороне. На данный момент длинный текст отображается справа, когда он поворачивается из его центра. Причина, по которой я хочу, чтобы это было сделано автоматически, а не просто вычислить ширину, я использую шрифты Google (которые в настоящее время отключены), и если шрифт не загружен, тогда текстовая строка будет длиннее/короче, чем раньше, и она снова будет выпадают из положения.
h2 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 30px;
color: #793F26;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: 0;
padding: 0 10px;
position: absolute;
left: -60px;
top: 100px;
background: #fdfdfd;
display: block;
}
это стиль, который я использую для H2, и нет ничего особенного в HTML, только H2 внутри контейнера div, который имеет границу 30px и дополнение 20px.
у кого есть идеи? благодаря
Я бы поставил ваши заголовки в более крупный контейнерный элемент, который был сосредоточен на левой границе, и центрировал заголовки внутри него.
http://jsfiddle.net/isherwood/sqh95/
body {
padding: 20px;
}
.heading-wrapper {
position: absolute;
width: 150px;
margin-left: -100px;
text-align: center;
}
h2 {
position: relative;
left: 0;
top: 50px;
white-space: nowrap;
}
<div class="heading-wrapper">
<h2>Contact</h2>
</div>
Лучше всего установить transform-origin
на что-то, что не меняется в зависимости от содержимого, например, left top
.
Затем вы можете использовать translateX(-100%)
для "переноса" вашего контента, чтобы вы поворачивались вокруг (фиксированного) верхнего правого угла. С этим легче работать, чем пытаться вращаться вокруг (изменяемого) верхнего правого угла.
Таким образом, ваш результат будет примерно таким:
transform-origin:left top;
transform:translate(X,Y) rotate(-90deg) translateX(-100%);
Замените translate(X,Y)
на требуемое движение, чтобы получить элемент в позиции вниз с левой стороны - лучше сделать это, чем использовать left
и top
, потому что тогда он будет выглядеть приемлемым в браузерах, которые не поддерживают преобразования.