Для некой интерактивности сайта, можно применить весьма нестандартные методы, главное чтобы они привлекали внимание. Главное не переусердствовать с этим. Ведь порой излишняя позолота начинает смотреться уже не солидно, а безвкусно и даже дешево, не смотря на труд и цену. Так и с сайтом, надо знать меру, дабы не перейти черту от "нормального" оформления, к цыганской безвкусице. А уж конечный проект с завершенными формами, то есть идеал, можно искать годами. Но сейчас не совсем об этом, а лишь об одной из возможных приколюх, которые между прочим реализуются на с помощью Ява скрипта, а всего лишь с помощью CSS. Надо сказать, что если дело так пойдет и дальше, то CSS заменит Ява в очень многом, что собственно уже и происходит. Итак, в статье о картинке перевертыше, при этом активной такая картинка становиться после наведения на нее курсора мышки.
Пример картинки - перевертыша
Вначале пример как это работает. Просто наведите мышку и наслаждайтесь. По поводу картинок, тут уж какие попались. Само собой можно дописать текст выше или ниже картинок или просто сделать цветные и строгие блоки для блоков div.
...теперь пример с этими картинками!
наведи мышку
обратная сторона
...картинки могут быть разными по размеру. Все стили и размеры ищем в коде ниже!
Код поворачивающиеся картинки (картинка перевертыш)
Теперь о самом коде. Его можно посмотреть в отдельном файле. Собственно там все понятно. style прописывается в случае если ставим на ту же страницу где и CSS, если же прописываем для всего движка, то без стилей сразу пишем в файл CSS.
Еще хотелось бы сказать, что трансформация может быть не только по горизонтали, но и по вертикали, здесь лишь надо transform: rotateY(180deg); заменить на rotateX(180deg); Собственно это логично!