『パクってOK』transformプロパティで圧倒的に動くCSSアニメーション２８選【Vueでも使える】

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

動きは下の画像のような感じになります

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する

【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する

【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選

動きは下の画像のような感じになります

１. transform rotateX×scaleで【縦回転】CSS画像アニメーション

２. transform rotateY×scaleで【横回転】CSS画像アニメーション

３. transform rotateY/Z×scaleで【3D回転】画像アニメーション

コードを確認する

transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

動きは下の画像のような感じになります

１. クリックで右方向からスライドしてくるアニメーション

２. クリックで上からスライドしてくるアニメーション

３. クリックで斜め上からスライドしてくるアニメーション

コードを確認する

【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateXで画像アニメーション

２. 【横回転】transform rotateYで画像アニメーション

３. 【3D回転】transform rotateYZで画像アニメーション

コードを確認する

filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

動きは下の画像のような感じになります

１. クリックで横幅が伸び縮みしながらスライドするアニメーション

２. クリックで縦幅が伸び縮みしながらスライドするアニメーション

３. クリックで思いっきり伸び縮みしながらスライドするアニメーション

コードを確認する

filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

動きは下の画像のような感じになります

１. 縦回転するシンプルなスライダーアニメーション

２. 滑らかに横回転するスライダーアニメーション

３. 平面回転するスタイリッシュなスライダーアニメーション

コードを確認する

【transform×回転『rotate』】CSS画像アニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateXで画像アニメーション

２. 【横回転】transform rotateYで画像アニメーション

３. 【3D回転】transform rotateYZで画像アニメーション

コードを確認する

【transform rotate×画像背景】CSS回転アニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX画像背景アニメーション

２. 【横回転】transform rotateY画像背景アニメーション

３. 【3D回転】transform rotateYZ画像背景アニメーション

コードを確認する