CSS 2D轉換基礎
2D轉換transform
2d轉換就是在平面內對元素進行移動、縮放、旋轉、拉長或拉伸。
▲注意：Transfrom只能轉換由盒模型定位的元素。盒模型定位元素根據經驗是指具有display：block；的元素。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta nameView Code="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box{ 10 width: 100px; 11 height: 50px; 12 border: 1px solid #000; 13 } 14 span{ 15 text-align: center; 16background-color: aqua; 17 } 18 .box .blo{ 19 background-color: red; 20 } 21 .box .inblo{ 22 background-color: blue; 23 } 24 .box .lis{ 25 background-color: cadetblue; 26 } 27 .box:hover span{ 28 transform: translateX(30px); 29 } 30 .box:hover .blo{ 31 transform: translateX(30px); 32 } 33 .box:hover .inblo{ 34 transform: translateX(30px); 35 } 36 .box:hover .lis{ 37 transform: translateX(30px); 38 } 39 </style> 40 </head> 41 <body> 42 <div class="box"> 43 <span>我是內聯元素</span> 44 </div> 45 <div class="box"> 46 <div class="blo">我是塊元素</div> 47 </div> 48 <div class="box"> 49 <div class="inblo">我是行內塊元素</div> 50 </div> 51 <div class="box"> 52 <li class="lis">我是list-item元素</li> 53 </div> 54 </body> 55 </html>
結論：據觀測來看transform屬性對內聯元素不可用。
Transform屬性
屬性值：
1.平移。
① translateY（n）：垂直方向平移，正數向下移，負數向上移
語法：transform:translateY(n);
② translateX（n）：水平方向平移，正數向右移，負數向左移
語法：transform:translateX(n);
③ translate（Xn，Yn）：簡寫方法，同時在水平方向和垂直方向平移。
語法：transform:translate(Xn，Yn)；
- n數值可以是畫素或相對單位或百分比。
- n是百分比時，指的是其是自身的百分比。
- Translate的效果類似position：relative；+margin，他原來的位置仍然佔位。
- Translate（）簡寫值可以不寫y軸平移數值，這樣的效果是隻有x方向的平移，y方向仍為0，相當於translateX（）。
DEMO1：小方塊在盒子內向右移300px
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box{ 10 width: 500px; 11 height: 200px; 12 border:1px solid #000; 13 margin: 100px auto; 14 } 15 .box>div{ 16 width: 100px; 17 height: 100px; 18 background-color: blue; 19 transition: transform 1s; 20 21 } 22 .box .i:hover{ 23 24 transform: translateX(300px); 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box"> 30 <div class="i">滑鼠懸浮在小div上</div> 31 </div> 32 </body> 33 </html>View Code
元素使用translate，效果上似乎是移動了，但是元素本身仍在原來的位置，當滑鼠移出元素原來的位置時，滑鼠懸浮效果會消失。
再例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 200px; border:1px solid #000; margin: 100px auto; } .box>div{ width: 100px; height: 100px; display: inline-block; background-color: blue; transition: transform 1s; } .box .i:hover{ transform: translateX(300px); } </style> </head> <body> <div class="box"> <div class="i">滑鼠懸浮在小div上</div> <span>aaaaaa</span> </div> </body> </html>View Code
平移前：
平移後：span沒有左移
2.放大/縮小scale。
定義：CSS 函式scale()用於修改元素的大小。可以通過向量形式定義的縮放值來放大或縮小元素，同時可以在不同的方向設定不同的縮放值。
Scale的變換是通過一個由x和y方向組成的二維向量在一個方向中進行縮放。
當其在x方向的向量座標和在y方向的向量座標相同時，是均等變換，保持元素本身形狀比例進行縮放（也稱位似變換）。
scale()僅適用於在歐幾里德平面（二維平面）上的變換。如果需要進行空間中的縮放，必須使用scale3D()。
① ScaleX
語法：
Transform：ScaleX（水平方向放大/縮小倍數n）
② ScaleY
語法：
Transform：sacaleY（垂直方向放大/縮小倍數n）
③ Scale
語法：
Transform：scale（X方向放大縮小的倍數,Y方向放大縮小的倍數）
▲Scale（n）中，n的值：
- n在[-1,1]之間為縮小，[-1，1]之外為放大
- n為正值是元素正面放大相應倍數，負值是元素進行畫素點反射後放大相應倍數。（旋轉180度稱為點反射）
- Scale（Xn，Yn）中若只設置一個值，則被解析為是Xn，同時把Yn的值預設為Xn的值，相當於x和y方向上同倍縮放。
例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box{ 10 width: 500px; 11 height: 400px; 12 border: 2px solid #000; 13 transform: rotateY(30deg); 14 } 15 .box div{ 16 width: 100px; 17 height: 100px; 18 margin: 50px auto; 19 background: url(https://img2.baidu.com/it/u=331362266,3772279129&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500); 20 background-size: cover; 21 } 22 .box:hover .fu{ 23 transform: scale(-2,-2); 24 } 25 .box:hover .zheng{ 26 transform: scale(2,2); 27 } 28 </style> 29 </head> 30 <body> 31 <div class="box"> 32 <div class="zheng">scale正值</div> 33 <div class="fu">scale負值</div> 34 </div> 35 </body> 36 </html>View Code
滑鼠懸浮前：
滑鼠懸浮時：
可以看出畫素點反射後的影象就是原圖在x軸方向翻轉180度，同時在y軸方向翻轉180度。
uZoom屬性：
3.旋轉rotate（）
Css Rotate函式：CSS的rotate()函式定義了一種將元素圍繞一個定點（由transform-origin屬性指定）旋轉變形的轉換。指定的角度定義了旋轉的量度。
- 旋轉180°也被稱為點反射。
- 元素旋轉的中心點稱為圓點。
- 圓點由transform-origin指定
- Rotate函式在元素的預設座標軸是元素的中心點為原點，向右是x軸正方向，向下是y軸正方向。
① RotateX
語法：Transform：rotateX（角度）；
讓一個元素圍繞橫座標（水平軸）旋轉，而不會進行變形，角度以edg為單位，x軸預設在元素水平位置中間。
正值為x軸指向處順時針旋轉，負值為x軸指向處逆時針旋轉（即正值為元素沿x軸向後旋轉，負值為沿x軸向螢幕前旋轉）
② rotateY
語法：Transform：rotateY（角度）；
圍繞縱座標（垂直軸）旋轉元素而不使其變形，角度以deG為單位，Y軸在元素垂直位置中間。
③ rotate
語法：Transform：rotate（角度）；將元素圍繞一個定點（由transform-origin屬性指定）旋轉變形的轉換。角度為正，則順時針方向旋轉，否則逆時針方向旋轉。
④ Transform-origin屬性：指定旋轉元素的旋轉中心點。（圍繞哪個中心點旋轉）
語法：Transform-origin：x-offset y-offset (z-offset)；2d時不用寫第三個值
x-offset：定義變形中心距離盒模型的左側的<length>或<percentage>偏移值。
y-offset：定義變形中心距離盒模型的頂的<length>或<percentage>偏移值。
z-offset：定義變形中心距離使用者視線（z=0處）的<length>（不能是<percentage>）偏移值。
- 屬性值用空格隔開
- 屬性值可以使畫素、百分比、關鍵字
- 屬性值可以使用一個，兩個或三個值來指定，其中每個值都表示一個偏移量。 沒有明確定義的偏移將重置為其對應的初始值。（一個值為定義x方向，兩個值為定義x y，三個值為定義x y z）
- 若是定義了兩個或兩個以上的值，則第一個是水平偏移量，第二個是垂直偏移量
- 一個值：
必須是<length>，<percentage>，或left,center,right,top,bottom關鍵字中的一個。
兩個值：
其中一個必須是<length>，<percentage>，或left,center,right關鍵字中的一個。
另一個必須是<length>，<percentage>，或top,center,bottom關鍵字中的一個。
三個值：
前兩個值和只有兩個值時的用法相同。
第三個值必須是<length>。它始終代表Z軸偏移量。
|
keyword |
value |
|
left |
0% |
|
center |
50% |
|
right |
100% |
|
top |
0% |
|
bottom |
100% |
⑤backface-visibility屬性
backface-visibility屬性：指定當元素背面朝向觀察者時是否可見。
- 元素的背面是其正面的映象。雖然在 2D 中不可見，但是當變換導致元素在 3D 空間中旋轉時，背面可以變得可見。 （此屬性對 2D 變換沒有影響，它沒有透視。）
屬性值：
1.Visible：背面朝向使用者時可見。
2.Hidden：背面朝向使用者時不可見。
Demo1：翻轉撲克牌
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .box{ 14 width: 100px; 15 height: 148px; 16 border: 1px solid #000; 17 position: relative; 18 perspective: 1200px; 19 transform: preserve-3d; 20 } 21 .front{ 22 position: absolute; 23 width: 100%; 24 height: 100%; 25 background: url(../旋轉/imgs/black13.png); 26 top: 0; 27 left: 0; 28 z-index: 1; 29 backface-visibility: hidden; 30 transition: all 3s; 31 } 32 .box:hover .front{ 33 transform: rotateY(180deg); 34 } 35 .back{ 36 position: absolute; 37 width: 100%; 38 height: 100%; 39 background: url(../旋轉/imgs/back.png); 40 top: 0; 41 left: 0; 42 transition: all 3s; 43 backface-visibility: visible; 44 } 45 .box:hover .back{ 46 transform: rotateY(180deg); 47 } 48 </style> 49 </head> 50 <body> 51 <div class="box"> 52 <div class="front"></div> 53 <div class="back"></div> 54 </div> 55 56 </body> 57 </html>View Code