こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
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画像背景アニメーション
