Как создать эффект сбрасывания карты на DIV с помощью javascript

Question

Я хочу создать эффект переноса карты (такой же, как переходы webkit и 3D-преобразования) на DIV, используя простые библиотеки javascript и CSS и NO или плагины. Как я могу это достичь? Поскольку большинство свойств CSS3 работают для браузеров webkit. И большинство решений javascript используют библиотеки, такие как jquery и его плагины. Я ищу решение, которое не использует какую-либо библиотеку, но только javascript/CSS и все еще работает с перекрестным браузером.

Любая помощь будет оценена по достоинству.

С уважением, manishekhawat

Answer 1

3d трансформирует в CSS3 в настоящее время работают только на WebKit браузерах. Извините - нет способа сделать это в других браузерах, не используя полисы JS, такие как cssSandpaper (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/).

Это не рекомендуется, так как это приведет к серьезному снижению производительности при загрузке версии JS.

3d Трансформации и анимация ключевых кадров по-прежнему являются (совершенно) новой особенностью спецификации CSS3 и поэтому принимаются только в самых современных браузерах (сафари, хром). Если вы хотите, чтобы кросс-браузерное решение, не требующее javascript, вам нужно будет сидеть на больших пальцах в течение нескольких лет.

Answer 2

Как реализовать:

CSS анимации очень весело; красота их заключается в том, что благодаря многим простым свойствам вы можете создать что угодно - от элегантного затухания до эффекта WTF-Pixar, который будет гордиться. Один эффект CSS где-то посередине - эффект сдвига CSS, в результате чего есть содержимое как спереди, так и сзади данного контейнера. В этом уроке вы покажете, как создать такой эффект как можно проще.

HTML-

HTML-структура для достижения двусторонний эффекта, как можно было бы ожидать, что это будет:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front"> 
      <!-- front content --> 
     </div> 
     <div class="back"> 
      <!-- back content --> 
     </div> 
    </div> 
</div> 

Есть два содержание стекла, «передних» и «назад», как и следовало ожидать, но также и два элемента с очень специфическими ролями, объясняемыми их CSS. Также обратите внимание на элемент ontouchstart, который позволяет панорамировать на сенсорных экранах.

CSS-

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 320px; 
    height: 480px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
} 

Вот грубый обзор процесса:

• периферийное контейнер устанавливает перспективы всей площади анимации в

• Внутренний контейнер элемент, который фактически переворачивается, вращаясь 180 градусов, когда родительский контейнер зависает. Это также где вы управляете скоростью перехода. Изменение поворота на -180deg вращает элементы в обратном направлении.

• Передний и задний элементы расположены абсолютно так, чтобы они могли «накладывать друг на друга» в том же положении; их обратная видимость скрыта, поэтому задняя часть перевернутых элементов не отображается во время анимации .

• Передний элемент имеет более высокий Z-индекс, чем на заднем элемент таким образом переднего элемент может быть закодирован первым, но он по-прежнему отображается на верхнем

• Задний элемент поворот на 180 градусов, так, чтобы выступать в качестве спина.

Это действительно все, что нужно! Поместите эту простую структуру на место, а затем настройте каждую сторону, как вам хотелось бы!

CSS Флип Переключить

Если вы предпочитаете элемент только переворачивать по команде с помощью JavaScript, простой класс CSS переключение будет делать трюк:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{ 
    transform: rotateY(180deg); 
} 

Добавление класса флип к элемент контейнера будет переворачивать карту с помощью JavaScript - не требуется зависание пользователя. Комментарий JavaScript, такой как

document.querySelector("#myCard").classList.toggle("flip") сделает флип!

CSS Вертикальный флип

Выполнение вертикального флип так же легко, как листать ось и добавления значения по оси преобразования происхождения. Происхождение флип должен быть обновлен и карта поворачивается в другую сторону:

.vertical.flip-container { 
    position: relative; 
} 

    .vertical .back { 
     transform: rotateX(180deg); 
    } 

    .vertical.flip-container .flipper { 
     transform-origin: 100% 213.5px; /* half of height */ 
    } 

    .vertical.flip-container:hover .flipper { 
     transform: rotateX(-180deg); 
    } 

Вы можете увидеть, что доступ X привыкает, а не Y.

Все заслуга разработчика Дэвид Уолш, Я только что воспроизвел контент.