3d трансформация с чистым CSS - PullRequest
Новая
       23

3d трансформация с чистым CSS

4 голосов
/ 06 июля 2011

Я пытаюсь восстановить это с чистым CSS.И у меня есть это далеко.Но идея, как вы можете видеть из флэш-версии, заключается в том, что при появлении обложки другие div-ы освобождают место для того, что находится при наведении.

Я попытался установить ширину на авто и установил свойство перехода для этого конкретного div, но безуспешно.Я также попытался установить ширину div на 0 перед наведением курсора и установить его на 300px при наведении, это помогло, но на самом деле это не оживило ..

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

Спасибо.

Ответы [ 3 ]

3 голосов
/ 06 июля 2011

Вам не нужен браузер WebGL, вы можете сделать это с помощью простых 3D-преобразований.

Вы должны явно изменять ширину div при наведении курсора, потому что преобразования явно не запускают ретрансляцию. Вам нужно расположить содержание книги абсолютно.

Вы должны использовать div-обертку для изменения ширины при наведении и дочерний div для преобразования.

Вложение является ключом к преобразованию здравомыслия.

Вот jsfiddle, который показывает его в действии: http://jsfiddle.net/ZMqze/4/

нужно немного больше блеска для unhover.

0 голосов
/ 05 декабря 2013

Вы можете использовать функции 3D-преобразования в CSS3. Это позволит вам получить желаемый эффект. Вы можете создать два <div> с. Один для передней и другой для задней. Сделайте так, чтобы передняя сторона перекрывала заднюю сторону, используя z-index, и поместите их в то же положение, используя position: absolute. Также сделайте их заднюю часть невидимой, установив backface-visibilty: none. Затем оберните их в <div class="flipper"> и добавьте анимацию к нему. Заверните флиппер внутрь <div class="container">

.container {
    perspective: 1000;
}

Перспектива позволит анимации быть трехмерной (обязательно используйте префиксы поставщиков). 

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

Флиппер должен иметь относительное положение, потому что два элемента внутри будут перекрывать друг друга и будут иметь абсолютное положение (убедитесь, что добавили префиксы вендора в стиль перехода и стиль перехода). 

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

Тогда вы можете просто добавить этот фрагмент кода, чтобы флиппер переворачивался при наведении на его обертку. Этот видеоурок поможет: http://www.youtube.com/watch?v=6ObIO-SjMZc

0 голосов
/ 06 июля 2011

во-первых, вам нужен браузер webgl, который поддерживает аппаратное ускорение (это только safari5 под windowsxp, btw. И webkitnightly custombuild для linux - или win7)

  • Поместите сторону и обложку в один div, называемый оберткой, у которого есть переход для свойства transform (с примерно таким же ослаблением 1 с или около того)
  • Вы должны «спрятать» крышку, повернув ее на 90 градусов вокруг оси Y
  • добавить обертку: класс при наведении, который вращается на -90 градусов вокруг оси Y

Если у меня еще будет время, я постараюсь дать вам точный css, но эти инструкции должны привести вас к желаемому результату.

...