Красивая галерея на css3

Здравствуйте, на днях решил побаловаться с css3 и сделать красивую менюшку. Для этого я почитал интересную страницу про свойство «transform» в css3.
Как и что я сделал. Сначала создаем html-файл с нашими будущими картинками:

Далее пишем css-файл. Он тоже достаточно простой:

body {
 background: url(bg.jpg) top left;
}
.container {
 width: 800px;
 margin: 0 auto;
 -webkit-transform: translateY(300px);
 -moz-transform: translateY(300px);
 -o-transform: translateY(300px);
 transform: translateY(300px);
}

Давайте рассмотрим последнее свойство подробней. Функция «transform: translateY(?px);» сдвигает блок на? пикселей по оси Y(вертикали) при -? вверх и при? вниз. Также есть «translateX(?px); и translate(?px, &px);» сдвигает блок по оси Х(горизонтали) и по оси X,Y соответственно. Я записал в кросс-браузерном варианте, поэтому данный код должен работать во всех новых браузерах.
Опишем блок «vcard»:

.vcard {
 cursor: pointer;
 display: block;
 float: left;
 width: 197px;
 height: 200px;
 -webkit-box-shadow: 0px 0px 6px 5px #ccc;
 -moz-box-shadow: 0px 0px 6px 5px #ccc;
 -o-box-shadow: 0px 0px 6px 5px #ccc;
 box-shadow: 0px 0px 6px 5px #ccc;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
 -webkit-transform: scale(0.8);
 -moz-transform: scale(0.8);
 -o-transform: scale(0.8);
 transform: scale(0.8);
}

«Box-shadow();» добавляет тень (смещение по X; смещение по Y; радиус размытия тени; радиус растяжения; цвет тени).
Про оператор «transition-duration(?)» объясню чуть позже.
Благодаря оператору «transform: scale(0.8);» мы уменьшаем блок на 20%.

Теперь добавим картинки. Это очень просто, достаточно вбить в гугле «album covers» и он вам выдаст красивые картинки.

.vcard:nth-of-type(1) {
 background-image: url(c01.jpg);
}
.vcard:nth-of-type(2) {
 background-image: url(c02.jpg);
}
.vcard:nth-of-type(3) {
 background-image: url(c03.jpg);
}
.vcard:nth-of-type(4) {
 background-image: url(c04.jpg);
}

Оператор :nth-of-type(?) показывает какому по счету элементу в блоке должен быть присвоен стиль.

И последние штрихи:

.vcard:hover {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
.vcard:active {
 -webkit-transform: scale(1) translateY(-50px);
 -moz-transform: scale(1) translateY(-50px);
 -o-transform: scale(1) translateY(-50px);
 transform: scale(1) translateY(-50px);
}

Здесь при наведении мышкой мы увеличиваем картинку до нормального размера(100%) и при нажатии на неё перемещаем картинку на 50 пикселей вверх.
Как раз для того, чтобы увеличение и перемещение картинки проходило плавно мы и используем оператор «transition-duration: 0.5s;». В нашем случае картинка будет преобразовываться в течении 0,5 секунды.

Ошибка, которую вы можете допустить — это если будете оператор «transform: ??;» использовать более двух раз. Таким образом он не будет работать или будет выполнять только первый. Правильно писать в одном операторе «transform: ??;» несколько функций, если это необходимо.

Скриншоты: при наведении, при нажатии.
К сожалению, на данный момент нет работающего сайта, куда бы я выложил работающий вариант.

Спасибо за внимание.