css變換

旋轉、平移、縮放和傾斜

基本定義

旋轉（Rotate）——元素繞着一個軸心轉動必定角度。（transform: rotateX(xdeg)|rotateY(ydeg)|rotateZ(zdeg)）
平移（Translate）——元素向上、下、左、右各個方向移動（有點相似於相對定位）。 (transform: translate(x,y)|translateX(x)|translateY(y)|translateZ(z))
縮放（Scale）——縮小或放大元素。（transform: scale(x, y)|scaleX(x)|scaleY(y)）
傾斜（Skew）——使元素變形，頂邊滑向一個方向，底邊滑向相反的方向。（transform: skew(x, y)|skewX|skewY）

注意點

1. 使用變換的時候要注意一件事情，雖然元素可能會被移動到頁面上的新位置，但它不會脫離文檔流。你能夠在屏幕範圍內以各類方式平移元素，其初始位置不會被其餘元素佔用。當旋轉某元素的時候，它的一角可能會移出屏幕邊緣，一樣也可能會遮住旁邊其餘元素的部份內容
2. 變換不能做用在<span>或者<a>這樣的行內元素上。
3. 變換是圍繞基點（point of origin）發生的。基點是旋轉的軸心，也是縮放或者傾斜開始的地方。這就意味着元素的基點是固定在某個位置上，元素的剩餘部分圍繞基點變換（但translate()是個例外，由於平移過程當中元素總體移動）。默認狀況下，基點就是元素的中心，但能夠經過transform-origin屬性改變基點位置。
4. 能夠對transform屬性指定多個值，用空格隔開。變換的每一個值從右向左按順序執行，

三維（3D）變換

旋轉和平移均可以在三個維度上實現：X軸、Y軸和Z軸。

控制透視距離

爲頁面添加3D變換以前，咱們須要先肯定一件事情，即透視距離（perspective）。變換後的元素一塊兒構成了一個3D場景。接着瀏覽器會計算這個3D場景的2D圖像，並渲染到屏幕上。咱們能夠把透視距離想象成「攝像機」和場景之間的距離，先後移動鏡頭就會改變整個場景最終顯示到圖像上的方式。

若是鏡頭比較近（即透視距離小），那麼3D效果就會比較強。若是鏡頭比較遠（即透視距離大），那麼3D效果就會比較弱。

設置透視距離位置的不一樣形成的區別

首先，咱們爲四個元素添加旋轉效果，使用rotateX()讓它們向後傾斜（以下圖）。由於每一個元素旋轉一樣的角度，而且設置了相同的perspective()，因此它們看上去同樣。

<div class="row">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>
//css
.row {
  display: flex;
  justify-content: center;
}

.box {
  box-sizing: border-box;
  width: 150px;
  margin: 0 2em;
  padding: 60px 0;
  text-align: center;
  background-color: hsl(150, 50%, 40%);
  transform: perspective(200px) rotateX(30deg);//transform中設置了相同的perspective()
}

但有時候咱們但願多個元素共享同一套透視距離，就彷彿它們處於相同的3D空間中。下圖用來演示這種狀況。這裏有四個相同的元素，但它們都向着遠方的一個相同的交匯點延伸，就彷彿把四個元素放一塊兒而後拍攝一張總體的照片。要實現這種效果，須要爲它們的父元素設置perspective屬性。

.row {
  display: flex;
  justify-content: center;
  perspective: 200px;//爲它們的父元素設置perspective屬性
}

.box {
  box-sizing: border-box;
  width: 150px;
  margin: 0 2em;
  padding: 60px 0;
  text-align: center;
  background-color: hsl(150, 50%, 40%);
  transform: rotateX(30deg);
}

上面兩種一個在transform設置perspective，一個直接設置爲屬性perspective，要注意

perspective-origin屬性

默認狀況下，透視距離的渲染是假設觀察者（或者鏡頭）位於元素中心的正前方。perspective-origin屬性能夠上下、左右移動鏡頭的位置

backface-visibility屬性

若是你使用rotateX()或者rotateY()旋轉元素超過90度，就會發現一些有趣的事情：元素的「臉」再也不直接朝向你。它的「臉」轉向別的地方，你會看到元素的背面。

這就是元素的背面。默認狀況下背面是可見的，但咱們能夠爲元素設置backface-visibility:hidden來改變它。添加這條聲明以後，元素只有在正面朝向觀察者的時候纔可見，朝向別處的時候不可見。