---
# System prepended metadata

title: CSS 變形效果transform 轉換效果transition
tags: [CSS]

---

# 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>
```


---


