1 3D轉換
轉換是使元素改變形狀、尺寸和位置的一種效果
1-1 rotateX() 方法
通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
div {
? width: 100px;
? height: 100px;
? background-color: #0F0;
? border: 1px solid
}
.div { transform: rotateX(50deg) }
運行效果：
rotateY() 旋轉
通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
.div { transform: rotateY(50deg) }
運行效果：
rotateZ() 旋轉
通過 rotateZ() 方法，元素圍繞其 Z 軸以給定的度數進行旋轉。
.div { transform: rotateZ(50deg) }
運行效果：
1-2 轉換屬性
transform 向元素應用 2D 或 3D 轉換。
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
語法：transform: none|transform-functions;
transform-origin 允許你改變被轉換元素的位置。
設置旋轉元素的基點位置
transform-origin 屬性允許您改變被轉換元素的位置
語法：transform-origin:x-axisy-axisz-axis;
.div {
? width: 200px;
? height: 200px;
? margin: 50px;
? border: 1px solid
}
.div1 {
? width: 100px;
? height: 100px;
? background-color: #0F0;
? transform: rotateZ(50deg);
? transform-origin: 30% 60%
}
運行效果：
transform-style 規定被嵌套元素如何在 3D 空間中顯示。
transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。
.div {
? position: relative;
? border: 1px solid;
? margin: 100px;
? padding:10px;
? width: 200px;
? height: 200px
}
.div1 {
? position: absolute;
? padding: 50px;
? background-color: #F0F;
? border: 1px solid;
? transform: rotateY(30deg);
? transform-style: preserve-3d
}
.div2 {
? position: absolute;
? padding: 40px;
? background-color: #0F0;
? transform: rotateY(10deg);
? border: 1px solid
}
運行效果
perspective規定 3D 元素的透視效果。
perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
.div {
? position: relative;
? border: 1px solid;
? margin: 100px;
? padding:10px;
? width: 200px;
? height: 200px;
? perspective: 100px
}
.div1 {
? position: absolute;
? padding: 50px;
? background-color: #F0F;
? border: 1px solid;
? transform: rotateY(30deg)
}
perspective-origin 規定 3D 元素的底部位置。
perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。
.div {
? position: relative;
? border: 1px solid;
? margin: 100px;
? padding:10px;
? width: 200px;
? height: 200px;
? perspective: 100px;
? perspective-origin: 10% 30%
}
.div1 {
? position: absolute;
? padding: 50px;
? background-color: #F0F;
? border: 1px solid;
? transform: rotateY(30deg)
}
運行效果
backface-visibility 定義元素在不面對屏幕時是否可見。
語法：backface-visibility: visible（可見）|hidden（隱藏）;
2 過度
2-1 瀏覽器支持如何工作
css3過渡是元素從一種樣式逐漸改變為另一種的效果
要實現這一點，必須規定兩項內容：
一，規定你希望把效果添加到那個css屬性上
二，規定效果的時長
div {
? width: 100px;
? height: 100px;
? background-color: #F0000F;
? transition: width 3s
}
div:hover { width: 300px }
運行效果
2-2 多項改變
div {
? width: 100px;
? height: 100px;
? background-color: #F0000F;
? transition: width 3s, height 3s, background-color 3s, transform 3s
}
div:hover {
? width: 300px;
? height: 300px;
? background-color: yellow;
? transform: rotate(360deg)
}
運行效果
鼠標懸浮時觸發效果，原圖會在規定時間運行完畢，鼠標離開，圖會在相同時間內恢復原圖！若未規定時間，觸發的的時候便完成效果
2-3 過渡屬性
transition 簡寫屬性，用于在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果何時開始。默認是 0。
