Эксперименты с CSS3 анимацией при создании слайдера

Обратите внимание, что 3D-эффекты будут работать только в браузере Safari.

Как это работает

Для нижеприведенного ряда изображений, мы добавим первое изображение в блок-обертку с классом te-cover. И с помощью JavaScript мы будем управлять классами переходов для  данных элементов в блоке te-transition,  в зависимости от того какое изображение будет показано. Итак, первый пример будет выглядеть так:

<div id="te-wrapper" class="te-wrapper">
    <div class="te-images">
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
        <img src="images/4.jpg"/>
        <img src="images/5.jpg"/>
    </div>
    <div class="te-cover">
        <img src="images/1.jpg"/>
    </div>
    <div class="te-transition">
        <div class="te-card">
            <div class="te-front"></div>
            <div class="te-back"></div>
        </div>
    </div>
</div>

Основная идея состоит в том, чтобы всегда показывать текущее изображения, используя класс te-cover. Когда мы начинаем анимацию, задавая соответствующий класс анимации, te-cover будет скрыт в то время когда анимация работает. Когда анимация заканчивается, элемента te-cover будет показан снова, с обновленным изображением.
Примеры

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

• Пример 1: Flip
• Пример 2: Rotate
• Пример 3: Multi-Flip
• Пример 4: Cube
• Пример 5: Unfold
• Пример 6: Others