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