轉(zhuǎn)換
轉(zhuǎn)換的簡介
1稳懒、什么是轉(zhuǎn)換
改變元素在網(wǎng)頁中的 形狀闲擦，尺寸，位置和角度的一種方式场梆。 元素能夠?qū)崿F(xiàn)2D轉(zhuǎn)換或3D轉(zhuǎn)換
2D:使元素在 x軸 和 y軸發(fā)生變化
3D:2D基礎(chǔ)上墅冷，增加在Z軸的變化
2、轉(zhuǎn)換屬性
1或油、屬性：transform
取值：
1寞忿、none
默認值，無轉(zhuǎn)換效果
2顶岸、transform-function
一個或多個 轉(zhuǎn)換函數(shù)腔彰，中間用 空格 分開
2叫编、轉(zhuǎn)換的原點屬性: transform-orgin
默認情況下：轉(zhuǎn)換原點在元素中的中心點
取值
1、value1 value2
value1 ：在x軸上的位置
value2 ：在y軸上的位置
2霹抛、value1 value2 value3
value1 ：在x軸上的位置
value2 ：在y軸上的位置
value3 : 在z軸上的位置
3搓逾、取值單位
1)、數(shù)值: 以元素的左上角 為 0px 0px 開始計算
2)杯拐、百分比:以元素的左上角 為 0% 0% 開始
0% 0% ：左上角
50% 50% : 元素中間
3)霞篡、關(guān)鍵字: top,right,bottom,left
例子:
div{
transform-origin:center center; /**原點在元素中心*/
transform-orgin:0% 100%;/*原點在元素左下角*/
}
坐標軸的方向
2D轉(zhuǎn)換
1、2D位移（作用: 改變元素在頁面中的 位置）
屬性：transform
函數(shù)：
translate(x)
translate(x,y)
translateX(x)
translateY(y)
取值：
1端逼、數(shù)值
2朗兵、百分比
3、負數(shù)
2顶滩、2D縮放（作用: 改變元素的 大小, 根據(jù)縮放比例 改變元素大杏嘁础）
屬性：transform
函數(shù)：
scale(value)
scale(x,y)
scaleX(x)
scaleY(y)
注意：一個參數(shù)時，第二個參數(shù)與第一個參數(shù)默認相等
x : x軸上的縮放比例
y : y軸上的縮放比例
取值：
默認值 為 1
縮谢寤觥：0-1之間的小數(shù)
放大：大于1的數(shù)值
3浊吏、2D旋轉(zhuǎn)(作用:改變元素顯示的角度)
屬性：transform
函數(shù)：rotate(ndeg)
deg : 單位 ， 不能省略
n : 旋轉(zhuǎn)的角度
+ ：順時針旋轉(zhuǎn)
- ：逆時針旋轉(zhuǎn)
注意:元素旋轉(zhuǎn)后救氯，連同坐標軸也跟著旋轉(zhuǎn)
4找田、2D傾斜（作用:讓元素向x軸或y軸產(chǎn)生一定傾斜角度(倒)）
屬性：transform
函數(shù)：
skew(xdeg)
skew(xdeg,ydeg)
skewX(xdeg)
skewY(ydeg)
注意
1、skewX(x)
元素向x軸的方向產(chǎn)生傾斜着憨，實際上是改變y軸的傾斜角度(逆時針)
2墩衙、skewY(y)
元素向y軸的方向產(chǎn)生清下，實際上是改變x軸的傾斜角度(順時針)
3D轉(zhuǎn)換
1甲抖、3D
空間距離 --> 空間軸 --> z軸
2漆改、空間距離
- 屬性：perspective
- 作用：定義人眼到3D投射平面的距離
- 定義位置：該屬性要定義在 實現(xiàn)3D轉(zhuǎn)換元素的父元素上
3、3D轉(zhuǎn)換效果
1准谚、旋轉(zhuǎn)
屬性：transform
函數(shù)：
1挫剑、rotateX(xdeg);
2、rotateY(ydeg);
3柱衔、rotateZ(zdeg);
4樊破、rotate3D(x,y,z,ndeg);
x,y,z 的取值 如果 為0 ， 則該軸不參與旋轉(zhuǎn)
rotate3d(0,0,1,45deg)-->rotatez(45deg)
transform:rotate3D(1,1,1,45deg)與
transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);
2唆铐、位移
屬性：transform
函數(shù)：
translatex()
translatey()
translate(x)
translate(x,y)
translatez(z);
translate3d(x,y,z);
3哲戚、屬性：transform-style
取值：
1、flat
默認值艾岂，以2D元素位置擺放子元素
當前元素還是2D元素
2顺少、preserve-3d
將當前元素變成3D元素
過渡(過渡(transition),使CSS屬性值，在一段時間內(nèi)平滑過渡，能夠觀察到變化的過程和最后的結(jié)果脆炎。)
1梅猿、過渡要素 & 屬性
1)、過渡屬性:
屬性：transiton-property
取值：
1腕窥、none
2粒没、all
3、property(具體的屬性名稱)
例子 :
transition-property:background;
transition-property:width;
可以設(shè)置過渡的屬性:
1簇爆、顏色屬性
2癞松、取值為數(shù)值的屬性
3、轉(zhuǎn)換屬性: transform
4入蛆、漸變屬性
5响蓉、visibility屬性
6、陰影
2哨毁、過渡時長(作用:指定 整個過渡 所需要的時間)
屬性: transition-duration
取值：
以 s | ms 作為單位的數(shù)值
1s = 1000ms
0.3s = 300ms
注意:該屬性 在過渡中 必須設(shè)置枫甲，否則默認為 0 ，不會產(chǎn)生過渡效果
3扼褪、過渡速度時間曲線函數(shù)
屬性: transition-timing-function
取值：
1)想幻、ease：默認值，慢速開始话浇，快速變快脏毯，慢速結(jié)束
2)、linear：勻速
3)幔崖、ease-in ：慢速開始食店，加速效果
4)、ease-out: 快速開始赏寇，減速效果
5)吉嫩、ease-in-out:慢速開始和結(jié)束，先加再減
4嗅定、過渡延遲(作用:當用戶激發(fā)過渡效果后自娩，等待多長時間后開始 顯示效果)
屬性:transition-delay
取值： 以 s | ms 作為單位的數(shù)值
默認值 ：0s
2、觸發(fā)過渡
用戶特殊行為 進行 觸發(fā)
如：
:hover
:active
:focus
或 JS
3渠退、簡寫屬性
transition:property duration timing-function delay,property duration ... ...;
動畫:動畫(animation)忙迁，使元素從一種樣式逐漸變化為另外一種樣式的過程
1、完成動畫所需要的步驟
1)智什、聲明動畫
在特點的時間點上設(shè)置動畫的樣式
時間點：是個模糊時間动漾，而不是具體時間
樣式：元素的 樣式
2)丁屎、為元素調(diào)用動畫
通過 animation 屬性 調(diào)用動畫
并且指定動畫的播放時長荠锭、次數(shù)等
2、聲明動畫
1)晨川、作用
通過 @keyframes 關(guān)鍵字 聲明動畫的"關(guān)鍵幀"
關(guān)鍵幀：某個時間點上的特殊效果
2)证九、語法
@keyframes 動畫名{
0% | from{
/*動畫開始時的樣式效果*/
width:100px;
height:100px;
background:red;
}
...
50%{
background:green;
}
...
100% | to{
/*動畫結(jié)束時的樣式效果*/
width:100px;
height:100px;
border-radius:50%;
background:blue;
}
}
兼容性：
@-webkit-keyframes 名{}
@-moz-keyframes 名{}
3删豺、調(diào)用動畫(兼容性)
1)、animation-name: 指定調(diào)用動畫的名稱
2)愧怜、animation-duration:完成一個動畫周期的時間
必須設(shè)置屬性
s | ms 作單位
3)呀页、animation-timing-function:完成動畫時的速度時間曲線函數(shù)
4)、animation-delay:動畫播放之前的延遲
5)拥坛、animation-iteration-count: 動畫播放次數(shù)
取值：
1蓬蝶、數(shù)值
2、infinite ：無限次播放
6)猜惋、aniamtion-direction: 動畫播放方向
取值：
1丸氛、normal,默認值，正向播放(0%~100%)
2著摔、reverse,逆向播放(100%~0%)
3缓窜、alternate,奇數(shù)播放次數(shù)是正向播放，偶數(shù)播放次數(shù)時谍咆，逆向播放
7)禾锤、簡寫方式 - animation
animation:name duration timing-function delay interation-count direction;
8)、animation-fill-mode:規(guī)定動畫在播放之前或之后摹察，動畫效果是否可見恩掷。
取值：
1、none
不改變默認行為
2港粱、forwards ：動畫播放完成后螃成，保持在最后一個 幀 的狀態(tài)上
3、backwards ：動畫播放之前(延遲時間內(nèi))查坪，保持在第一個 幀 的狀態(tài)上
4寸宏、both：動畫播放前后都采用填充模式
9)、animation-play-state: 規(guī)定動畫的播放狀態(tài)(運行或暫停)
取值：
1偿曙、paused : 暫停
2氮凝、running : 播放
