Форум

mavovan · #1 (**permalink**) 05.12.2010, 19:13

как можно наклонить картинку на js или jquery??
что именно нужно:
нужно подвинуть картинку на задний фон
чтобы левая часть картинки была дальше чем правая

пример например в последней safari -> история -> там карусель картинок центральная прямо стоит, а по бокам картинки наклонены вот этот наклон мне и нужен

как это вообще можно сделать можно ли вообще
где почитать или посмотреть

monolithed · #2 (**permalink**) 05.12.2010, 19:52

Сообщение от mavovan

как это вообще можно сделать можно ли вообще

использовать Canvas+CanvasExplorer (методы: setTransform/transform) или SVG+VML или же если браузеры по-барабану CSS3:

img {
-webkit-transform:rotate3d(0, 0, -1, 180deg) skale(1,5 3) skewX(15deg);
-webkit-transform-style:preserve-3d;
}

mavovan · #3 (**permalink**) 06.12.2010, 11:03

и какой браузер?? в firefox, chromium, opera нет изменений))

monolithed · #4 (**permalink**) 06.12.2010, 11:22

SVG:
Opera 8.0+
Firefox 1.5+
Safari 4.0+
Google Chrome 3.0+
Internet Explorer 9.0+ (Platform Preview 3)

VML:
Internet Explorer 5.0+

Canvas:
Firefox 1.5+
Opera 9.0+
Google Chrome 2.0+
Internet Explorer 9.0+ (Platform Preview 3) для более ранних версий есть ExplorerCanvas

CSS3 (transform):
Firefox 3.5+
Opera 10.5+
Google Chrome 3/4+ (частично)
Safari 4+
Internet Explorer 9.0+ (Platform Preview 3)

рони · #5 (**permalink**) 06.12.2010, 14:01

Ссылки по теме
http://raphaeljs.com/image-rotation.html
http://www.netzgesta.de/instant/
есть и ещё если поискать )))
Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js" type="text/javascript"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var paper = Raphael(0, 0, 500, 500);
var c = paper.image("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif", 5, 70, 336, 76);
var i = paper.image("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif", 5, 70, 336, 76);
c.rotate(25);
i.rotate(-25);
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript