Если я не ошибаюсь, элементы являются частью нормального потока или плавают как если бы они не преобразовывались. Как только их позиция установлена, выполняется преобразование или переход. Преобразование или переход больше не будут влиять на поток документов или на любое изменение.
На какую сторону сверху, слева, справа или снизу влияет трансформация. Таким образом, если вы примените границу к вершине повернутого элемента div в вашем примере, граница появится с левой стороны.
EDIT:
Чтобы, надеюсь, помочь вам понять это немного больше, я создал образец, который похож на ваш, но я добавил отступы, поля, верхнюю и нижнюю границы, которые, надеюсь, иллюстрируют, что к чему. Я также добавил фоновые цвета и границы
четко видеть размер элементов блока и как они вращаются.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.fl {
border-top: solid 2px #ff0000;
border-bottom: solid 2px #00ff00;
float: left;
color: #ffffff;
padding: 10px 30px;
}
.left {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
background-color: #808080;
height: 50px;
width: 300px;
margin-left: -360px;
}
.right {
background: #404040;
height: 300px;
width: 300px;
margin-top: 18px;
margin-left:74px;
}
span {
display: block;
width: 100%;
height: 100%;
background-color: #A0A0A0;
}
</style>
</head>
<body>
<div class="fl left"><span>Rotated text</span></div>
<div class="fl right"><span>Other content</span></div>
</body>
</html>
Важно помнить, что все выложено до применения преобразования.
Самая интересная часть этого примера, на мой взгляд, заключается в том, как применяются поля, чтобы выровнять оба элемента div рядом друг с другом и выровнять их по левой стороне страницы. Если никакие поля и трансформация не будут применены, левая сторона div будет смещена относительно левой стороны страницы, а правая сторона div будет смещена против этого.
Если бы мы тогда просто добавили преобразование (без полей), div повернулся бы на -90 градусов (с правым верхом в качестве начала координат) и оказался бы в верхней части правого бокового элемента div. В то же время, это также оставило бы большой белый промежуток на левой стороне, где левый div был первоначально расположен. Помните, что преобразования не влияют на плавающие.
Чтобы снова выровнять оба элемента визуально по левому краю страницы, мы должны применить поле. Чтобы получить левый div с левой стороны, мы должны применить отрицательное поле к левой стороне. Это может сбивать с толку, но помните, что поле применяется до преобразования. Таким образом, для того, чтобы div появился на месте, которое мы хотим после преобразования, мы должны сначала переместить его перед преобразованием на -360 пикселей (= 300 ширина + 30 отступов влево + 30 отступов вправо) влево, чтобы после поворота на -90 градусов оно появляется точно при 0 пикселях.
Правая сторона div плавает против левой стороны div. Таким образом, он эффективно расположен в позиции x 360. Поскольку мы перемещаем левый div влево с отрицательным полем -360 пикселей, теперь он заканчивается в точке 0. Таким образом, он находится в той же позиции, что и левый div после преобразования , Чтобы визуально выровнять его по правой стороне левого делителя, мы должны применить к нему положительное поле. Сколько? Другая, возможно, сбивающая с толку часть заключается в том, что мы здесь должны рассчитать это на основе повернутого левого делителя, поскольку мы должны выровнять его визуально по повернутому левому делителю. Таким образом, это 50 (высота = ширина повернутого div) + 10 (верхнее заполнение) + 10 (нижнее заполнение) + 2 x 2 (2 x верхняя / нижняя граница) = 74 пикселя.
Я добавил еще одно поле в верхнюю часть правого элемента 18 пикселей, чтобы визуально выровнять области содержимого диапазона. Надеюсь, что все это помогает понять, что все отступы, поля, позиции и плавающие значения всегда вычисляются до преобразования.