html控制弯曲图,html – CSS3 3D弯曲视角

CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲.

这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点.

那么我忽略的任何属性,或者是一个让它看起来像弯曲的组合？

div {

width: 90%;

height: 700px;

position: fixed;

left: 5%;

top: 0;

background-color: rgba(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,180deg);

}

to {

-webkit-transform: rotate3D(0,1);

}

}