transformを使用した一覧カードのアクション

transformの値を使うといろいろできるようです。

code:こんなの作ってみました.css

.page-list .grid li:hover {

transition: 1.0s;

-webkit-transform: translate(-20px,-20px) scale(1.3,1.3) rotateY(360deg);

-moz-transform: translate(-20px,-20px) scale(1.3,1.3) rotateY(360deg);

transform: translate(-20px,-20px) scale(1.3,1.3) rotateY(360deg);

}

/* pinどめされたカードは回らない */

.page-list .grid li.pin:hover {

-webkit-transform: none;

-moz-transform: none;

transform: none;

}

カーソルをあてた一覧カードが反応します。