H 23 chapter transition 轉場屬性 滑鼠移入按鈕有變化 貝茲. 置中定位 前綴屬性 transform

 transition

transition-property: width, height;  什麼樣的轉場變化效果 例如 寬＆高的變化

transition-duration:  0.5s(寬度變化的時間）, 1s（高度變化的時間）; 時間多長

transition-delay: o.5s(寬度時間delay),1s(高度時間delay); 

transition-timing-function: ease(預設值）/linear; cubic-bezier貝茲曲線

cubic-bezier  參考網址

https://cubic-bezier.com/#.17,.67,.83,.67

縮寫方式：

transition: width 0.5s 1s（delay）, (使用逗號隔開兩個值） height 0.5s 空格隔開 ease-in;

transition：all(包含寬高同時delay) 0.5s ease-in;

常見問題

transition 位置寫在

.box 裡面 效果就會都呈現在移出＆移入

 .box{ 設定所需方匡的大小顏色

          width: 100px;

          height: 100px;

          background-color:#ff0043;

          }

.box:hover{ 滑鼠移入效果

                    width: 200px;

                    height: 200px;

transition

置中定位

.box{ 

          width: 100px;

          height: 100px;

          background-color:#ff0043;

          position: fixed; (以螢幕為參考定位）

         left: 50%;

         top: 50%;

         (因為是以螢幕為參考定位 所以不會真的在正中間 

          會超出一個物件的範圍 故必須要物件變形（往回/減少）

         transform: translate(-50%, - 50%)  水平跟垂直的移動。   

          }

transform: rotate透過這個rotate 我們能夠將元素旋轉，單位是 度數 deg ，順時鐘為正的，逆時針為負的。

transform: perspective 搭配屬性也可做3D旋轉，設定位置放在父層元素。

transition 是一個新的 css3 屬性 

需要考慮瀏覽器是否支援

https://caniuse.com/