# CSS 變形效果transform 轉換效果transition ###### tags: `CSS` 其他參考:[2D Transform](/SOkuSq_mTyGiVLoTh_8xtA) --- ## 變形效果 transform * 元素預設座標系統預設位置為左上角(0,0)，主要用來排版;==transform的預設值為(50%,50%)==，主要用來做動畫效果，不要搞混喔～ ![](https://i.imgur.com/kHp805c.png) ![](https://i.imgur.com/uhmjhcY.png) ![](https://i.imgur.com/sDXGSrK.png) ![](https://i.imgur.com/PfTT92I.png) --- ## 更改變形的定位點：transform-origin * ==transform-origin：水平位置 垂直位置== * transform-origin: 0% 0%; ```htmlmixed= ``` --- ## 轉換效果 transition * =={**transition-duration:**|轉換時間}== (兩個效果轉換的時間，單位為秒(s)，預設0秒 ) * =={**transition-property**：|要轉換的屬性}== (兩個效果改變的屬性 ex:width、height) * =={**transition-timing-function**：|轉換時間用哪個方法}== (轉換速度方法，預設為ease ) ![](https://i.imgur.com/Cly9ewh.png) * =={**transition-delay**：|延遲時間}== (開始轉換前的等待時間，單位為秒(s)，預設0秒 ) 練習: ```htmlmixed= <head> <style> /*動態轉換效果*/ .box3 { width: 100px; height: 100px; background-color: lightblue; border: 1px dotted black; text-align: center; line-height: 100px; transition-duration: 1s; transition-property: width; transition-timing-function: ease; transition-delay: 0s; } .box3:hover { width: 400px; } </style> </head> <body> <div class="box3">向右變長</div> </body> ``` --- ## 整合轉換效果 ==語法 transition：轉換時間 轉換屬性 轉換方法 延遲時間== ```htmlmixed= <head> <style> /*動態轉換效果-一行*/ .box4 { width: 100px; height: 100px; background-color: lightblue; border: 1px dotted black; text-align: center; line-height: 100px; transition: 1s height ease 0s, 3s background-color ease 0s; /*可使用2種以上效果，以逗號隔開表示*/ } .box4:hover { height: 400px; background-color: #428bca; } </style> </head> <body> <div class="box4">整合轉換效果打在同一行</div> </body> ``` ---