Рамка CSS Изображение поверх другого изображения для создания эффекта рисования

Question

У меня есть от дизайнера сайта следующий результат: http://mp -books.ru / html / img / result_03.jpg

Идея состоит в том, что штампованная рамка будетостаться на странице, но изображение человека будет меняться от случая к случаю, будет взят из базы данных.

Я пришел к такому результату: http://jsfiddle.net/alexpeta/MUpk8/1/, но это лучшее, что я могу сделать.

Я экспериментировал с вращением, как

-webkit-transform: rotate(-18deg); 
    -moz-transform: rotate(-18deg); 
    transform:rotate(-18deg); 
    -o-transform:rotate(-18deg);

, но IE не разрешит это преобразование, потому что имеет фильтр с точным числом градусов: например, 45, 90, 180 и т. Д.и клиент хочет, чтобы картинка была в каждом браузере.

Любая помощь в этом мозге?

С уважением, Алекс

Answer 1

Вы можете использовать преобразование MATRIX на изображении

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=0.951, M12=0.309,
    M21= -0.309, M22=0.951);

будет соответствовать 18 градусам

Расчеты:

[cos(18)  sin(18)]
[-sin(18) cos(18)]

Answer 2

Лучшим решением для совместимости было бы преобразование изображения на стороне сервера с использованием System.Drawing . Что касается наложения кадров, я думаю, что вы слишком усложняете вещи: если вы знаете, как всегда будет выглядеть фон, не вырезайте рамку как прозрачное изображение, вырежьте его с фоном, чтобы он скрывался любое переполнение с картинки.

Answer 3

Свойство CSS transform позволяет разработчикам вращать, масштабировать и наклонять блоки HTML с помощью CSS.Хотя вы можете сделать то же самое с изображениями в Photoshop или GIMP, использование CSS-преобразований позволяет разработчикам делать то же самое с любой разметкой HTML и позволяет пользователям выбирать текст в преобразованном объекте. оформить заказ