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

[<img width="778" alt="スクリーンショット 2020-08-02 22.15.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/f697d9ec-bf88-a222-cf05-624229fa1029.png">
](https://www.twinzlabo.com)

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

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

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

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


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

###１.  rotate×box-shadowでリアルすぎる画像回転アニメーション
![images-rotate-animation-3picks1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e0d6e755-ceeb-224a-31ba-574ade98c60e.png)


###２. rotate×scale(拡大)で失敗しない画像回転アニメーション
![images-rotate-animation-3picks2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a4b9b381-878f-51c4-f7a4-647a89f37f49.png)


###３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション
![images-rotate-animation-3picks3 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2ddcb376-6bb1-b76b-4ea5-3cddcd0a98bd.png)

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


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

###１.  【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation1-228x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a42c8aeb-eba8-09da-0ff8-752d50317f61.png)


###２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation2-265x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4ec738c0-7c39-9218-9857-c1cae629c68a.png)


###３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation3-275x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2ffbdb26-7358-be75-23aa-7a1ade21ea6e.png)

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


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

###１.  transform rotateX×scaleで【縦回転】CSS画像アニメーション
<img width="701" alt="スクリーンショット 2020-07-27 23.27.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cf7e3aa5-7df5-7f54-e7c7-d9257b898383.png">


###２. transform rotateY×scaleで【横回転】CSS画像アニメーション
<img width="696" alt="スクリーンショット 2020-07-27 23.27.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cc923450-58bb-4210-3985-ea3f03dc7377.png">


###３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
<img width="689" alt="スクリーンショット 2020-07-27 23.27.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7199b145-7906-3065-c4e7-6c899eb6f360.png">

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


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

###１. クリックで右方向からスライドしてくるアニメーション
<img width="522" alt="スクリーンショット 2020-07-27 23.31.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2059db12-fdab-228f-dcd8-8b1207f5408e.png">


###２. クリックで上からスライドしてくるアニメーション
<img width="516" alt="スクリーンショット 2020-07-27 23.31.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c44583ba-403c-d6d5-5fbd-16ed9efcc5be.png">


###３. クリックで斜め上からスライドしてくるアニメーション
<img width="512" alt="スクリーンショット 2020-07-27 23.31.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/65897bab-a431-426c-9901-ee38e2fcceb3.png">

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


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

###１. 【縦回転】transform rotateXで画像アニメーション
<img width="698" alt="スクリーンショット 2020-07-27 23.34.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d2984c91-6476-ddb7-c408-2c4eab9a0fe4.png">


###２. 【横回転】transform rotateYで画像アニメーション
<img width="695" alt="スクリーンショット 2020-07-27 23.34.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/04f00ade-4301-3bc7-9bcf-42548d26e74b.png">


###３. 【3D回転】transform rotateYZで画像アニメーション
<img width="695" alt="スクリーンショット 2020-07-27 23.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/625925da-f89f-f583-a852-472eaa014511.png">

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


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

###１. クリックで横幅が伸び縮みしながらスライドするアニメーション
<img width="522" alt="スクリーンショット 2020-07-27 23.36.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/364bd601-d716-d945-47da-94699ffd5e65.png">


###２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
<img width="513" alt="スクリーンショット 2020-07-27 23.36.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/bd246ab6-d24d-c8c3-dcf6-1e0f736fb784.png">


###３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
<img width="507" alt="スクリーンショット 2020-07-27 23.36.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/548b455d-e999-8995-0530-9ae46bd537c3.png">

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


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

###１. 縦回転するシンプルなスライダーアニメーション
<img width="498" alt="スクリーンショット 2020-07-27 23.39.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a06f972b-346f-26a4-54a3-53701535f095.png">


###２. 滑らかに横回転するスライダーアニメーション
<img width="501" alt="スクリーンショット 2020-07-27 23.39.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/5c9fece4-4384-17eb-dc37-4a0b012ee5ca.png">


###３. 平面回転するスタイリッシュなスライダーアニメーション
<img width="498" alt="スクリーンショット 2020-07-27 23.39.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4673bca9-bf55-c753-7899-b23b207b376a.png">

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


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

###１. 【縦回転】transform rotateXで画像アニメーション
<img width="708" alt="スクリーンショット 2020-07-27 23.41.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/101e68de-0591-51cd-bbea-a47f506e15df.png">


###２. 【横回転】transform rotateYで画像アニメーション
<img width="699" alt="スクリーンショット 2020-07-27 23.41.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/79c720d9-a6a9-886b-c342-d2557d21dc03.png">


###３. 【3D回転】transform rotateYZで画像アニメーション
<img width="701" alt="スクリーンショット 2020-07-27 23.41.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8da3e751-b074-ae12-a14a-01e98d804920.png">

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


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

###１. 【縦回転】transform rotateX画像背景アニメーション
<img width="679" alt="スクリーンショット 2020-07-27 23.43.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cab3f098-5268-10a9-e46a-8fbcea949b21.png">


###２. 【横回転】transform rotateY画像背景アニメーション
<img width="684" alt="スクリーンショット 2020-07-27 23.43.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8bbf84c1-00ea-3ab0-c2b7-a4f44d0f0479.png">


###３. 【3D回転】transform rotateYZ画像背景アニメーション
<img width="677" alt="スクリーンショット 2020-07-27 23.43.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d9a6b138-0490-070e-7829-6570c575d59a.png">