? ? 今日學(xué)習(xí)內(nèi)容：2D轉(zhuǎn)換之位移、旋轉(zhuǎn)（包括旋轉(zhuǎn)原點的設(shè)置）、縮放、傾斜；3D轉(zhuǎn)換之位移、旋轉(zhuǎn)、縮放、傾斜。
? ? 總結(jié)如下要點：
（一）2D轉(zhuǎn)換
? ? （若想看到變換效果，要給圖形的盒子設(shè)置過渡 transition: 3s）
1.位移
語法 => transform: translate(x,y);
????其中x表示水平方向的位移（即左右），y表示垂直方向的位移（即上下）。
????括號內(nèi)最多只能有2個值，當(dāng)只有1個值的時候表示水平位移。
????值的大小可以為正數(shù)，也可以為負數(shù)。當(dāng)值為負數(shù)的時候向反方向移動。
????值的單位可以為像素（如100px，-100px），也可以為百分比（如50%，-50%）。當(dāng)值用百分比來表示的時候，參照的是元素translate所在盒子的大小。
? ? translate屬性不脫標！
2.旋轉(zhuǎn)
語法 => transform：rotate();
? ? 括號內(nèi)表示旋轉(zhuǎn)的角度，必須使用單位deg。
? ? 當(dāng)括號內(nèi)的值為正數(shù)時，表示順時針旋轉(zhuǎn)；為負數(shù)時，表示逆時針旋轉(zhuǎn)。
3.旋轉(zhuǎn)原點的設(shè)置
語法 => transform-origin: x y;
? ? 其中x表示水平方向，值可以設(shè)置為方位值left，center，right；或者像素px；或者百分數(shù)%。
????y表示垂直方向，值可以設(shè)置為方位值top，center，bottom；或者像素px；或者百分數(shù)%。
? ? 當(dāng)x或y的值為負數(shù)時，旋轉(zhuǎn)原點在盒子之外。
? ??默認旋轉(zhuǎn)原點為所在盒子的中心點：center center。（x和y之間用空格隔開。）
代碼舉栗：
<!-- 當(dāng)鼠標進入path盒子時，風(fēng)火輪自動向右轉(zhuǎn)動；鼠標移出時風(fēng)火輪復(fù)原 -->
<body>
?????<div class="path">?
? ??????<div class="wheel"> 風(fēng)火輪 </div>?
????</div>
</body>
<style>
/* 此處省略path及風(fēng)火輪樣式，設(shè)置鼠標進入盒子時的樣式 */
? ? .path:hover .wheel {
? ? ? ??/* translate()中只有一個值，表示水平移動，上下不動 */
? ??????/* rotate()中設(shè)置為3600度表示轉(zhuǎn)動十圈 */
? ??????transform: translate(1000px) rotate(3600deg);
????}
????如上所示。如果既要發(fā)生位移又要發(fā)生旋轉(zhuǎn)，必須在同一個transform內(nèi)同時設(shè)置多個屬性，用空格隔開，不能分開寫成兩個transform，因為分開寫成兩個后會使樣式發(fā)生重疊，展示最后定義的transform。
4.縮放
語法 => transform: scale(x,y);
? ? 其中x表示水平方向（改變圖形的寬度），y表示垂直方向（改變圖形的高度）。當(dāng)括號內(nèi)只有一個值的時候，圖形的寬和高同步變換。
????括號里的值為數(shù)字：（值的正負不會影響圖形變換）
? ? 1）值=0時，圖形消失；
? ? 2）0<值<1時，圖形縮小為原來的幾倍；
? ? 3）值=1時，圖形不變；
? ? 4）值>1時，圖形放大為原來的幾倍；
5.傾斜
?語法 => transform: skew(x,y);
????其中x表示左右傾斜（左邊和右邊），上下兩條邊保持水平（常用）。y表示上下傾斜（上邊和下邊），左右兩條邊保持垂直。只有一個值的時候默認為左右傾斜。
? ? 值的單位為deg，表示傾斜度數(shù)。如60deg。
? ? 如果想要盒子內(nèi)部的某些內(nèi)容不傾斜，需要單獨設(shè)置：給字內(nèi)容加標簽，然后設(shè)置transform: skew()內(nèi)的值為負的父標簽的值。（如果給字內(nèi)容加的標簽為行內(nèi)元素如span，需要用display: block或display: inline-block轉(zhuǎn)換成塊級元素或行內(nèi)塊元素。）
代碼舉栗：
<!-- 用圖形傾斜代替添加背景圖片可以加快加載速度 -->
<body>
? ?? <ul>
? ???????<li> <a href="#"> <span>首頁</span> </a> </li> <li>
? ??????<!-- 此處省略7個 li>a>span -->
? ? </ul>
</body>
<style>
????/* 省略ul和a標簽的css樣式設(shè)置 */
????li {
? ??????float: left;
? ??????background: black;
? ??????margin-right: 20px;
? ??????transform: skew(-20deg);
????}
? ??li a span {?
? ??????display: block;?
? ??????transform: skew(20deg);?
? ? }
</style>
6.盒子居中的方法總結(jié)
? ? 盒子居中要用到“子絕父相”。即子元素設(shè)置 position: absolute; 父元素設(shè)置 position: relative; 然后設(shè)置left、top、margin等值：
????1）left: 0;
? ? ? ? ? right: 0;
? ? ? ? ? top: 0;
? ? ? ? ? bottom: 0;
? ? ? ? ? margin: auto;
? ? 2）lef: 50%;
? ? ? ? ? top: 50%;
? ? ? ? ? margin-left: -自身寬度一半;
? ? ? ? ? margin-top: -自身寬度一半;
? ? 3）left: 50%;
? ? ? ? ? top: 50%;
? ? ? ? ? transform: translate(-50%, -50%);
（二）3D轉(zhuǎn)換
1.位移
語法 =>?transform: translateX() translateY() translateZ();
????增加了Z軸屬性 transform: translateZ();
? ? 括號內(nèi)的值為正數(shù)時，表示離我越來越近，圖形變大；值為負數(shù)時，表示離我越來越遠，圖形變小。簡稱近大遠小。
? ? 添加translateZ屬性后，如果想要看到效果，需要給添加了transform: translateZ()屬性的元素的上級元素（不一定就是父盒子）加透視 perspective: 600px; （perspective值一般為600px～1000px）。
? ? 添加透視的目的是為了看到近大遠小的效果。
2.旋轉(zhuǎn)
語法 =>?transform：rotateX(20deg) rotateY(20deg) rotateZ(20deg);
? ? 需要添加透視、過渡屬性來看到效果。
? ? 如圖，箭頭的指向即為要設(shè)置為正值的方向。
代碼舉栗：
? ? <!-- 簡單的前后兩面立方體旋轉(zhuǎn) -->
<body>
? ? <!-- 外層的盒子 -->
? ? <div class="box">
? ? ? ? <!-- 真正產(chǎn)生效果的盒子 -->
? ? ? ? <div>前</div>
? ? ? ? <div>后</div>
? ? </div>
</body>
<style>
? ? body {? ?
? ? ? ? perspective: 600px;? ? ???/* 給上級元素設(shè)置透視才能看到效果 */
? ? }
? ? /* 外層父盒子，代表完整的立體空間 */
? ? .box {
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? /* border: 1px solid; */? ???/* 不想展示出旋轉(zhuǎn)軸就把boder去掉 */
? ? ? ? margin: 200px auto;
? ? ? ? position: relative;
? ? ? ? transition: 3s;? ???/* 設(shè)置過渡 */
? ? ? ? transform-style: preserve-3d;? ??/* 設(shè)置3D空間 告訴瀏覽器3d還是2d*/
? ? }
? ? /* 前后兩個盒子共同屬性 */
? ? .box div {
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? position: absolute;
? ? }
? ? /* 前紅 */
? ? .box div:nth-child(1){
? ? ? ? background: red;
? ? ? ? z-index: 1;? ???/* 層疊級次低被blue覆蓋，加z-index。默認為0 */
? ? ? ? transform: translateZ(100px);
? ? }
? ? /* 后藍 */
? ? .box div:nth-child(2){
? ? ? ? background: blue;
? ? ? ? transform: translateZ(-100px) rotateY(180deg);
? ? }
? ? .box:hover {
? ? ? ? transform: rotateY(180deg);? ???/* 鼠標移入父盒子時父盒子轉(zhuǎn)動 */
? ? }
? ? 如上。3D立方體一定要有一個父盒子包裹起來才能使用（代碼中的.box）。
? ? 只有給父盒子標記為3d盒子，添加 transform-style: preserve-3d;才能有效果。（代碼第22行）
????translateZ()表示前后，前后在哪里與盒子當(dāng)時的正面方向有關(guān)。
? ? 如代碼?transform: translateZ(-100px) rotateY(180deg); 中，先旋轉(zhuǎn)再位移與先位移再旋轉(zhuǎn)得到的效果不同，因為參照軸是不一樣的。
3.縮放
語法 =>?transform: scaleX() 或 scaleY() 或 scaleZ();
scaleX()和scaleY()于2D變換一樣。scaleZ()改變的是立方體的厚度（前后的距離），只在3D空間下才有效。
4.傾斜
語法 =>?transform: skewX(度數(shù)deg) 或?skewY(度數(shù)deg);
????skewX和skewY可以分成兩個transform來寫。
? ??3D變換中Z沒有傾斜屬性。
