State of CSS 2022 を眺めていて知らなかったことのうち、object-view-boxについて調べた
object-view-box
object-view-boxプロパティは、chrome104で実装された機能で、画像要素のズームまたはパンを可能にする
First Look At The CSS object-view-box Property | CSS-Tricks - CSS-Tricks
以下のように指定する
object-view-box: <basic-shape-rect>;
<basic-shape-rect>は以下で定義されているが、使えるのはinsetのみ
鹿野さんが紹介しているような使い方がよさそう
Chrome 104から使えるCSSのobject-view-boxが便利✨
— 鹿野 壮 Kano Takeshi (@tonkotsuboy_com) 2022年8月3日
画像にホバーしたとき、サイズを変えずに中身だけズームインアニメーションという定番表現。
object-view-box: inset(0%);
から
object-view-box: inset(10%);
にtransitionさせれば、超手軽に実装できる💪
デモhttps://t.co/FZl6q4xZPB#CSS pic.twitter.com/ngtl2O4nCm
