CSS - поворот текста поверх изображения

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

Конечный пользователь может масштабировать фотографию и перемещать ее вверх/вниз и влево/вправо, а также добавлять текст (span внутри div-контейнера).

<div id="theText" class="productImageOverlay activeText" style="z-index: 7;font-size:20px;">
    <span class="uploadedImage" id="" style="margin-top: -1px; position: absolute;"></span>
</div>

Затем я вычисляю ширину и положение этих элементов (margin-left, margin-top), используя верхний левый угол внешнего содержимого в качестве исходной точки (0,0), и использую PHP для создания составного изображения с правильным обрезка.

Это работает нормально, за исключением того, что теперь они хотели бы иметь возможность вращать текст, который я могу сделать с помощью CSS (добавить преобразование: поворот (-90deg); к диапазону), однако я изо всех сил пытаюсь получить точку вставки повернутого текст

Я знаю, что все это можно было бы сделать с помощью элемента canvas HTML 5, но он должен работать с IE8.

Любая помощь очень ценится

повернутый текст


html css image-rotation
person djcamo    schedule 25.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

попробуйте использовать следующий код в вашем css для текста

/* Safari */
-webkit-transform: rotate(-90deg);

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

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

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

он должен повернуть текст на 90 градусов и по-прежнему сохранять центральную точку текста в центре.

person Kristofer Aron Sverrisson    schedule 25.08.2014
comment
Если это не сработает, вы также можете попробовать повернуть весь div вместо простого поворота текста, чтобы все внутри div сохраняло правильные пропорции. под этим я подразумеваю, что вы создаете всю книгу вертикально, а затем берете этот div и поворачиваете его. - person Kristofer Aron Sverrisson; 26.08.2014
comment
спасибо, ваш указатель выше плюс настройка высоты текста сделали свое дело, очень признателен - person djcamo; 26.08.2014