<div class="card bgRed">ノーマル</div> <hr /> <p>マウスオーバーで・・・</p> <div class="card bgBlue flip">パキっとめくれる</div> <br /> <div class="card bgGreen flip flipAnimation">ゆっくりめくれる</div> <br /> <div class="card bgYellow flipMore flipAnimation">めっちゃめくれる</div> <br /> <div class="card bgPurple flipMore flipAnimation flapInTheWind">風になびきつつ、めっちゃめくれる</div> /* shape */ .card { position: relative; width: 300px; padding
![CSS3のみで紙がペラッとめくれる表現 - jsdo.it - Share JavaScript, HTML5 and CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d669e7213dca533289b7fe965d3b4ff79f8c063/height=288;version=1;width=512/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2FF%2F8%2Fc%2FF8cI.jpg%3Ft%3D1329057380)