用途
新着
履歴
分類

CSS 要素の伸縮加工とアニメーション

CSS 要素の伸縮加工とアニメーション
画像や要素をCSSで伸縮して加工するサンプルです。

伸縮の開始位置やアニメーションへの応用を実装してみました。

通常の画像はこちら


CSSで縦に要素を伸ばすとこのようになります。


.demo_1 {
    width: 200px;
    transform: scaleY(1.5);
}

デフォルトで画像の中央から引き伸ばされます。scaleXにすれば横の伸縮の倍率を指定できます。

引き伸ばす位置を下に固定するには

.demo_2 {
    width: 200px;
    transform-origin: center bottom;
    transform: scaleY(1.5);
}

transform-originで開始位置を指定できます。一つ目は横、二つ目は縦の始点を指定できます。

次はアニメーションにしたパターンです。

.demo_ani {
    width: 200px;
    transform-origin: center bottom;
    animation: pull 2s infinite;
} 
@keyframes pull {
  0%   { transform: scaleY(1.0); }
  50%  { transform: scaleY(1.5); }
  100% { transform: scaleY(1.0); }
}
公開 2021-12-16 16:33:17
更新 2022-01-31 01:45:55
このページの二次元コード
CSS 要素の伸縮加工とアニメーション

人気のサンプル

search -  category -  about
© 2024 kipure
Top