🐴 Transform

箱モデルやnormal-flowには元の位置があり、そこで回転、傾斜、移動することができます!
右から左に変形を適用

transform : rotate(10deg) translateY(5px)

→translationY先適用、rotate後適用.

1.拡大・縮小（）→拡大・縮小

2 Dの関数は、3 Dで調整することはできません(sclale 3 d()単独funcがあります)

transform : scale(sx);

transform : scale(sx,sy);

scale(0.5)では、横ビューと縦ビューがそれぞれ50%と50%減少します.
開発者ツールでは、imgサイズはwidthであり、heightは変わらない.
scaleは人に見せるためだけです.

2.回転（）→角度調整

『angle』は実は資料型です.
程度を表す.

45deg→45度.

車輪を表す.

2 turn→2回転

90 deg=0.25回転(1/4回転したため)

3.翻訳を担当（）→移動

transform:translate(sx);

transform:translate(sx,sy);

scaleと同様にx軸、y軸を移動できます.
一つ入力すれば、x軸200 px,y軸200 pxを移動するのではなく、(200 px,0)である.

4.傾斜（）→傾斜

rotate()はdegに類似している.

transform:skew(sx);

transform:skew(sx,sy);

1つの値しか書かれていないのは斜体(x,0);作ったのと同じです.
どちらもx軸がsxに傾き、y軸がsyに傾くと書かれています.

5.transform-origin

transformはまったく異なる属性を使用します

transform-origin:top left;

👾 Transition

時間差でスムーズに変更します.△時間の概念を増やした.

1. transition-property

transition-property : none ;何も変更しないことを示すtransition-property : all;すべてのプロパティを変更します.transition-property : margin-right;margin right.

2. transition-duration

:どれくらいの時間が経てば、変わるか

transition-duration : 500ms;
transition-property : margin-right;

すなわち,marging-rightでは500 msの時間で効果を変化させる.

transition-duration : 500ms, 600ms;
transition-property : margin-right, color;

margin rightには500 ms、colorには600 msが必要であることを意味する.
Unit : 1s=1000ms

- Example

.box{
  width:300px;
  height:80px;
  border: 2px dashed teal;
  background-color:darkslategray;
  font-size:50px;
  color:white;
  
  transition-property: all;
  /*모든 property를 변경하겠다는 의미*/
  transition-duration: 2s;
}

.box:hover{
  width:340px;
  background-color:indianred;
  font-size:60px;
}

transion-propertyとtransion-ducration.box:hoverをマウスに置いて移動すると、効果は適用されません.(ex.マウスを2秒間離して変更した効果Xを適用)

3. transition-delay

transition-dayer要素が複数ある場合、要素がドミノの骨牌になる効果を生じることができます.

4. transition-timing-function

AからBへの中間過程が存在する.
赤->青になると、中間過程で紫色になる可能性があります.transition-timing-function : ease; transition-timing-funtion : linear:変化の速度は線形に一致します.
ダイナミックな効果が得られます.

- transition shortcut

. box{
...
...

transition-property: all;
transition-duration : 3s;
transition-delay: 1s;
transition-timing-funtion: ease-in-out;

使えるけど、

. box{
...
...

transition: all 3s ease-in-out 1s;

一行にも使えます.
一番前はtransition-propertyが最初に使いました!

遷移と変換の使用例

.hover-ex{
  width:500px;
  height:300px;
  background-color: darkolivegreen;
  border-radius: 30px;
  
  transition: all 2s ease-in-out;
}

.hover-ex:hover{
  transform:rotate(360deg);
}