1 3D轉(zhuǎn)換
轉(zhuǎn)換是使元素改變形狀、尺寸和位置的一種效果
1-1 rotateX() 方法
通過(guò) rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。
div {
? width: 100px;
? height: 100px;
? background-color: #0F0;
? border: 1px solid
}
.div { transform: rotateX(50deg) }
運(yùn)行效果：
rotateY() 旋轉(zhuǎn)
通過(guò) rotateY() 方法趋翻，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。
.div { transform: rotateY(50deg) }
運(yùn)行效果：
rotateZ() 旋轉(zhuǎn)
通過(guò) rotateZ() 方法燃辖，元素圍繞其 Z 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)鬼店。
.div { transform: rotateZ(50deg) }
運(yùn)行效果：
1-2 轉(zhuǎn)換屬性
transform 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換黔龟。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)妇智、縮放、移動(dòng)或傾斜
語(yǔ)法：transform: none|transform-functions;
transform-origin 允許你改變被轉(zhuǎn)換元素的位置氏身。
設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置
transform-origin 屬性允許您改變被轉(zhuǎn)換元素的位置
語(yǔ)法：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%
}
運(yùn)行效果：
transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示巍棱。
transform-style 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素。
.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
}
運(yùn)行效果
perspective規(guī)定 3D 元素的透視效果蛋欣。
perspective 屬性定義 3D 元素距視圖的距離航徙，以像素計(jì)。該屬性允許您改變 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 規(guī)定 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)
}
運(yùn)行效果
backface-visibility 定義元素在不面對(duì)屏幕時(shí)是否可見(jiàn)窝稿。
語(yǔ)法：backface-visibility: visible（可見(jiàn)）|hidden（隱藏）;
2 過(guò)度
2-1 瀏覽器支持如何工作
css3過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果
要實(shí)現(xiàn)這一點(diǎn)楣富，必須規(guī)定兩項(xiàng)內(nèi)容：
一，規(guī)定你希望把效果添加到那個(gè)css屬性上
二伴榔，規(guī)定效果的時(shí)長(zhǎng)
div {
? width: 100px;
? height: 100px;
? background-color: #F0000F;
? transition: width 3s
}
div:hover { width: 300px }
運(yùn)行效果
2-2 多項(xiàng)改變
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)
}
運(yùn)行效果
鼠標(biāo)懸浮時(shí)觸發(fā)效果纹蝴，原圖會(huì)在規(guī)定時(shí)間運(yùn)行完畢，鼠標(biāo)離開(kāi)踪少，圖會(huì)在相同時(shí)間內(nèi)恢復(fù)原圖塘安！若未規(guī)定時(shí)間，觸發(fā)的的時(shí)候便完成效果
2-3 過(guò)渡屬性
transition 簡(jiǎn)寫(xiě)屬性秉馏，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性耙旦。
transition-property 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。
transition-duration 定義過(guò)渡效果花費(fèi)的時(shí)間萝究。默認(rèn)是 0免都。
transition-timing-function 規(guī)定過(guò)渡效果的時(shí)間曲線(xiàn)。默認(rèn)是 "ease"帆竹。
transition-delay 規(guī)定過(guò)渡效果何時(shí)開(kāi)始绕娘。默認(rèn)是 0。
