img отобразить трапецией с помощью css

[alfaq]

Есть изображение вставленное с помощью тега img , необходимо его обрезать/повернуть c помощью css3, что бы оно стало отображаться трапецией. Это нужно для слайдера - пример прикреплён.
Есть пример http: //guluzade.com/css-трапеция/ , но там заливается одним цветом, пробывал ставить background-image, не стыкуется

[Naive]

http://www.xiper.net/collect/html-an...css3-flip.html

п.с. ваш пример — стрельба из пушки по воробьям. Такая штука (трапеция из примера) делается кросс-браузерно при помощи границ. Честная трапеция делается по-другому.

[Лубышев]

Naive офигенно клевый эффект. жаль не кросбраузерен

[Naive]

Сообщение от Лубышев

Naive офигенно клевый эффект. жаль не кросбраузерен

Слишком тяжелый, если контент не нужно подставлять поисковикам, то лучше делать на канвасе + поддержка шире.
Еще недостаток в том, что для ИЕ 10+ нужно писать обширный костыль, ибо они не поддерживают preserve-3d (относительное 3д позиционирование)

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

[Лубышев]

писал 3д игру в пьяницу для вебкитов, смотрелось симпотично =)

Ну это прям дикость с вашей стороны, говорить, что на HTML писал 3D игру и не делиться линком

[Naive]

Сообщение от Лубышев

Ну это прям дикость с вашей стороны, говорить, что на HTML писал 3D игру и не делиться линком

Специально для вас закинул на тестовый серв, http://u34841.netangels.ru/yandex_game/.
Адекватно работает только на вебкитах (хром, яндекс), веб-кит оперу не проверял. Изначально писалось под фаерфокс (я все под него пишу, ибо в верстке самый труЪ), но в 104 трехмерных объектах (52 карты, 2 стороны) он начинает путаться.
Можно попробовать сделать с перспективой по w3c, я тогда про нее не знал(
Узнал только из примера, который сам же скинул выше, я его подробно до этого не разбирал, предпочитаю самостоятельно разбираться, по докам или "прощупыванием" консоли >_>. Но, век живи — век учись

[Лубышев]

Очень понравилось. спасибо за ссылку.
P.S. сообщение для вас есть в личке

[alfaq]

Ребята, так а что с проблемкой, то? Существует некий слайдер cover-flow, он очень похож, но пока прикрутить не удалось. Придется видимо дальше пробывать крутить его, так как img просто не трансформировать как нужно?

[Лубышев]

Трансформация при которой стороны не попарно параллельны поддерживается только хромом. остальные пока что не умеют этого делать

[Naive]

Сообщение от Лубышев

Трансформация при которой стороны не попарно параллельны поддерживается только хромом. остальные пока что не умеют этого делать

ФФ давно уже поддерживает (кажется с 21 версии), ИЕ с 10 версии (нет только относительного позиционирования, в этой задаче это не так важно), опера с перехода на вебкит (вроде с 16 версии), сафари (если не ошибаюсь, нужно юзера пнуть в настройки чтобы разрешить webGL)
пруф