Позиция ПОСЛЕ трансформации в CSS?

Рассмотрим следующую попытку повернуть абзац на 90 градусов и поместить его так, чтобы угол, который изначально был его верхним левым углом (и который, следовательно, стал его верхним правом углом после поворота), оказался в правом верхнем углу угол родительского блока.

HTML:

<!DOCTYPE html>
<html>
<body>
  <div id="outer">
    <p id="text">Foo bar</p>
  </div>
</body>
</html>

CSS

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
        transform: rotate(90deg); 
        position: absolute;
        top: 0;
        right: 0;
}

В Firefox 19.0.2 на OS X 10.6.8 он терпит неудачу. Это связано с тем, что, несмотря на порядок, в котором были указаны свойства CSS, преобразование применяется после позиционирования. Другими словами, браузер:

помещает #text так, чтобы его верхний правый угол находился в верхнем правом углу родительского блока, но только тогда
вращает его, в результате в верхнем правом углу находится не, расположенный в верхнем правом углу родительского блока.

В результате свойство transform-origin здесь мало используется. Если, например, один использовал transform-origin: top right;, то #text нужно было бы перемещать вниз по ширине, которая была перед поворотом.

Мой вопрос: есть способ сообщить браузеру применить свойства позиционирования CSS после вращения; а если нет, то вместо этого существует способ перемещения #text вниз (например, с помощью top:) по ширине, которая была до, она была повернута?

NB. В идеале решение не должно требовать установки фиксированного width: для #text и не требует JavaScript.

Ответы

Ответ 1

Вы можете применить более одного преобразования к элементу, и порядок имеет значение. Это самое простое решение: http://jsfiddle.net/aNscn/41/

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
    background: lightBlue;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    transform: translate(100%) rotate(90deg);
    transform-origin: left top;

    -webkit-transform: translate(100%) rotate(90deg);
    -webkit-transform-origin: left top;
}

Ответ 2

Вращающийся -90deg.

 .rotate {
        position:absolute;
       -webkit-transform-origin: left top;   
        /* Safari */
        -webkit-transform: rotate(-90deg) translateX(-100%);

        /* Firefox */
        -moz-transform: rotate(-90deg) translateX(-100%);

        /* IE */
        -ms-transform: rotate(-90deg) translateX(-100%);

        /* Opera */
        -o-transform: rotate(-90deg) translateX(-100%);
   }

Ответ 3

Решено: здесь

Это код, который я добавил:

left: 100%;
width: 100%;
-webkit-transform-origin: left top;

Я также добавил некоторые префиксные свойства преобразования, поэтому это будет кросс-браузер

-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);

Как я это сделал:

Я нашел этот вопрос, и, как говорит название веб-сайта, "скрипт" с кодом для получения этого поведения. Я думаю, что решение left: 100%; вместо right: 0;.

(существует width: 100%;, потому что по какой-то причине это не было 100%, а текст переполнился бы до следующей строки)

Ответ 4

Вы можете попробовать использовать анимацию CSS3 @keyframes. Это позволит вам вращаться и перемещаться в любом порядке. Вот учебник, который может помочь: [CSS-Tricks] [1]

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
p {
  border: 1px solid blue;
  position: absolute;
  top: auto;
  right: 0;
  display: inline-block;
  margin: 0;
  animation: 1s rotate 1s both;
}
@keyframes rotate {
  0% {
    transform-origin: top left;
    transform: rotate(0deg);
    right:0;
  }
  50% {
    right:0;
  }
  100% {
    transform-origin: top left;
    transform: rotate(90deg);
    right: -64px;
  }
}

<div class="container">
  <p>some text</p>
</div>

Ответ 5

Возможно, вам захочется поиграть с опцией translate, которую вы можете применить в качестве второй функции преобразования после поворота и поместить свой элемент в нужное положение, которое вы хотите. Нет другого способа, я предполагаю, что браузер должен использовать свойства позиции после использования функции преобразования с использованием простого css.

См. эту демонстрацию - http://codepen.io/anon/pen/klImq

Ответ 6

Поместите "! important" в конец строки преобразования.