<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