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

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

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

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

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

7
задан Knu 13 June 2011 в 21:58
поделиться