CSS3 3D изгиб перспектива - PullRequest
Новая
       41

CSS3 3D изгиб перспектива

7 голосов
/ 14 июня 2011

CSS3 3D-трансформации + отличная анимация. Мне интересно, есть ли способ заставить что-то гнуться.

Этот пример переворачивает div (paper), но анимация выглядит жесткой, потому что в действительности, когда вы переворачиваете бумагу, она немного изгибается.

То есть какие-либо свойства, которые я пропустил, или, может быть, комбинация, которая делает их похожими на изгибы? 

div {
    width: 90%;
    height: 700px;
    position: fixed;
    left: 5%;
    top: 0;
    background-color: rgba(0,0,0,0.9);

    -webkit-transform: perspective(1000);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: top;
    -webkit-animation: "page curl down" 1s ease-out forwards;
}

@-webkit-keyframes "page curl down" {
    from {
        -webkit-transform: rotate3D(1,0,0,180deg);
    }

    to {
        -webkit-transform: rotate3D(0,0,1);
    }
}

Пример скручивания страницы с изгибом (изображение): http://numerosign.com/software/css3machine/#documentation

Ответы [ 2 ]

4 голосов
/ 17 июня 2011

Нет.Лучший способ - использовать холст, а затем скользить по изображению, например: http://www.20thingsilearned.com/. Вот пример того, как это работает: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

Есть много ограничений с этим методом, но этолучшее, что я видел.

2 голосов
/ 24 октября 2012

Элементы браузера в настоящее время ограничены занятостью в одной плоской плоскости. Не важно что. Я боролся с идеей симуляции изогнутого <div>s в течение некоторого времени без заметного прогресса. Использование прозрачного объекта с границей, border-radius и matrix3d ​​может создать «изгибы», но это далеко не так. Если вы укажете только border-top, с установленным border-top-left-radius, вы можете создать прямую линию с изогнутым концом. Очевидно, что это все еще часть единой плоской плоскости, изгибающейся в направлении его двумерной оси.
Как только мы начинаем думать о том, чтобы согнуть ваш 2-мерный элемент в 3-м измерении, которое он в настоящее время не занимает, это буквально становится невозможным без Canvas, WebGL или других механизмов рендеринга.

...