cssのskewを使ってぷるぷるアニメーション ｜ Tips Note by TAM

突然ですが、transformプロパティのskew使っていますか？ skewを使えばX軸、Y軸へのゆがみを表現できるのでちょっとした動きを作る際にとても便利です。 今回はそんなskewを使って、化粧品のクリームがぷるぷる揺れるデモを作っていきたいと思います！ 完成デモを見る 素材を用意してHTMLに配置する 下記の写真を利用して、青色にしている真ん中のクリーム部分だけを動かしていきましょう。 用意した素材は、下記の3枚で、重なり合うようにHTMLに配置していきます。 ）一番下にオリジナル写真。 ）二番目に動かしたい箇所だけを切り抜いた「クリーム」画像。 ）一番上にクリーム部分を切り抜いたマスク画像。 ※二番目のクリーム画像を動かした際に、不自然な隙間ができてしまうことがあるので 念の為背景にオリジナル写真を配置しています。 skewについて skewを使えばX・Y軸の傾斜角度をそれぞれ個別