Как создать наклонное (не выровненное) слайд-шоу? - PullRequest
Новая
       14

Как создать наклонное (не выровненное) слайд-шоу?

2 голосов
/ 01 октября 2010

Есть ли способ создать слайд-шоу изображений, которое поворачивается, скажем, на 5 °?Я бы предпочел не флэш-решение.Спасибо!

Screenshot of what I want to achive

Ответы [ 2 ]

4 голосов
/ 01 октября 2010

CSS3 имеет свойство rotate, которое вы можете установить.В вашей таблице стилей это будет выглядеть примерно так: 

#mydiv {
    transform: rotate(45deg);
}

Однако, оно довольно новое и в настоящее время имеет довольно ограниченную поддержку браузера, поэтому оно не идеально.

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

В Microsoft Internet Explorer есть совершенно другой механизм поворота.

Ваша окончательная таблица стилей может выглядеть примерно такэто: 

#mydiv {
    -ms-transform: rotate(45deg); /* IE9 beta? */
    -moz-transform: rotate(45deg);  /* FF3.5+ */
    -o-transform: rotate(45deg);  /* Opera 10.5 */
    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
    transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
    filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

(вам нужно самостоятельно определить углы для IE! тот, который я предоставил, должен подойти для 45 градусов)

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

Кроме того, поворотный элемент будет ухудшаться по качеству из-за пикселизации на экране.,Насколько сильно это будет зависеть от качества алгоритмов ротации браузера, но всегда будет некоторая потеря качества.

Короче говоря, ротация в браузере (на данный момент, по крайней мере) - скорее игра.вещь, чем полезная часть функциональности.Но это можно сделать.

4 голосов
/ 01 октября 2010

Вы сможете использовать это с преобразованиями CSS , но это не будет работать во всех браузерах.

Редактировать: Решение , которое подразумевает работу кросс-браузер.

...