Простая функция JavaScript OnClick

Question

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

Я использовал переходы css3 (в настоящее время они работают только в Chrome и Safari) для создания флип-карт, которые срабатывают при наведении курсора - они отлично работают и именно то, что я ищу. Все, что я сейчас пытаюсь сделать, это добавить функцию JavaScript (используя jQuery), которая постоянно переворачивает карту при нажатии. Я не хочу, чтобы он отключил функцию при наведении, хотя это чистый CSS.

Мне очень трудно это реализовать.

Сайт находится здесь:

www.samueljamesdesign.com

Любая помощь будет принята с благодарностью.

Answer 1

Просто измените свой CSS так, чтобы вращение также запускалось добавлением класса. Например, измените это правило:

#card-container:hover .front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

К этому:

.card-container:hover .front,
.card-container.selected .front,{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

Обратите внимание, что вы не можете использовать #card-container, так как недопустимо иметь в документе несколько элементов с одинаковым идентификатором. Вместо этого установите card-container в качестве класса.

---

Чтобы при щелчке мышью все происходило, вы делали следующее:

var tiles = $('#tiles .card-container');
tiles.click(function() {
    tiles.removeClass('selected');
    $(this).addClass('selected');

    //To change the image in maincontent to match the
    //one in the flipcard clicked on:
    $('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});