css 動畫（一）transform 變形

前言：這是筆者學習以後本身的理解與整理。若是有錯誤或者疑問的地方，請你們指正，我會持續更新！

 

　　有段時間我是沒理清 transform、translate、transition 和 animation之間的關係的，如今整理一下：

• translate：平移；是 transform 的一個屬性；
• transform：變形；是一個靜態屬性，能夠改變元素的形狀或位置，作出 2d 或 3d 效果；
• transition：過渡，轉變；使 css 屬性值在一段時間內平滑的變化，須要有觸發條件（如 hover 等），是 animation 的簡化版；
• animation：動畫；能夠設置多幀效果，而後把它們組合變換，按動畫效果展現出來；

　　　　

• transform，可設置 translate（位移）  rotate（旋轉）  scale（縮放）  skew（傾斜）；接受多值，用空格分開，並按照從前日後的順序執行；
• transform-origin，可更改轉換元素的基準點（默認值，元素中心，50% 50% 0）；
• transform-style，可設置 flat（默認值，2d展現）仍是 preserve-3d（3d展現）；此屬性必須在 transform 以後使用；
• perspective，設置元素距離視圖的距離，默認爲0；
• perspective-origin，設置視點（默認值，元素中心，50% 50%），必須和 perspective 結合使用；
• backface-visibility，設置元素不面向屏幕時是否可見；

translate

　　translate（位置平移）

• 能夠爲負值，向右向下是正值，向上向左是負值；
• 能夠爲百分比，百分比是基於元素自身寬高的（咱們能夠利用這一點實現 未知寬高的元素的垂直居中）；
• 2d效果能夠拆開寫成 translateX(x)、translateY(y)，也能夠直接寫成translate(x,y)，縮寫中若是隻寫了一個值，默認是x；
• 3d效果還有 translateZ(z)，縮寫 translate3d(x,y,z)，3d效果中縮寫的話，就必須得寫3個值，少一個都不行，沒有的值能夠設爲0；

rotate

　　rotate（旋轉）

• 能夠設負值；正值是順時針旋轉，負值是逆時針旋轉；
• 能夠寫成 rotateX(deg)、rotateY(deg)、rotateZ(deg)；（角度的單位，負30度就是-30deg）

scale

　　scale（縮放）

• 能夠是整數，也能夠是小數，也能夠設置負值；
• 能夠寫成 scaleX(x)、scaleY(y)、scaleZ(z)，也能夠縮寫成 scale(x,y) 或者 scale3d(x,y,z)；
• 當某值設爲0時，就看不見元素了，可是空間還在，和 visibility:hidden 效果同樣；
• 當設置負值的時候，會發生翻轉的效果；
• 縮放看起來雖然大小變化了，但佔據的空間不變，不會影響佈局；
  

    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
  
      .wrapper {
        width: 300px;
        margin: 100px 0 0 100px;
        border: 10px solid red;
      }
  
      .test {
        width: 200px;
        height: 200px;
        display: inline-block;
        background: #0ff;
        transform: scale(.5, -1);
        border: 1px solid #f60;
      }
  
      .test img {
        max-width: 100%;
      }
    </style>
    <div class="wrapper">
      <span class="test"><img src="images/1.jpg" /></span>
      <span>scale能夠設置小數，也能夠設置負值；雖然大小看起來變化了，但佔據的空間不變，不會影響佈局</span>
    </div>

   

skew

• 能夠寫成 skewX(deg)、skewY(deg)，也能夠縮寫成 skew(x,y)，縮寫若是隻寫了一個值，那就默認僅僅只是 x 軸；
• 目前沒有 Z 軸的傾斜；
• 圍繞 X 軸傾斜，會保持高度不變，拉長元素，產生變形；
• 圍繞 Y 軸傾斜，會保持寬度不變；
• 能夠寫負值，（下圖爲X軸的正值和負值）；

　　

　　

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      width: 300px;
      height: 300px;
      position: relative;
      margin: 100px 0 0 100px;
      border: 1px solid red;
      background: #0ff;
    }

    .test {
      width: 150px;
      height: 60px;
      position: absolute;
      left: 30%;
      top: 30%;
      background: #f60;
      transform: skewX(-45deg);
    }
  </style>
  <div class="wrapper">
    <div class="test"></div>
  </div>

 

transform-origin

　　設置轉換元素的基準點，而後元素的變形就圍繞這個點展開；

• 默認值是元素中心（50% 50% 0）；
• X 和 Y 軸能夠設置單位值、百分比、left | center | right | top | bottom；Z軸只能設置具體單位值；
• 能夠設置1-3個值，用空格隔開，若是隻寫了1個，那麼僅僅只是X軸；2個的話，就是 X 軸和 Y 軸；

transform-style

　　設定元素及其子元素怎樣在三維空間中展現；

• 默認值，flat，2d平面；設置爲 preserve-3d，就是3d空間；
• 當元素設置 overflow:hidden 的時候，preserve-3d 失效；
• 通常咱們在元素的父元素身上使用，由於此屬性能夠繼承；

prespective

　　設置元素距離視圖的距離，

　　 

• 默認爲 none（0）；可設置具體值，以像素爲單位，不能爲負值；
• 咱們看遠處的物體，會發現看不清，當咱們走近一點的時候，就看得清除了，此屬性能夠理解爲咱們站的位置離物體的距離；
• 咱們通常在變形元素的父元素身上使用，由於瀏覽器會爲其子元素產生透視效果，不會爲它自己產生透視效果；設置了此屬性的元素咱們也叫透視元素；

prespective-origin

　　　　設置視點；

　　

• 默認值（50% 50%），可設置單位值、百分比、left | center | right | top | center | bottom ；
• 能夠設置1-2個值，設置1個值時，另外一個默認爲 center；
• 能夠理解爲咱們看妹子的時候看的哪一個位置，臉？腿？胸？
• 此屬性必須定義在設置了 prespective 屬性的元素身上；

backface-visibility

　　設置當元素不面向屏幕時，是否可見；若是旋轉元素不但願看見其背面時，此屬性很好用；

• 默認 visible，可設置 hidden；

　　

　　正方體後面要繞 Y 軸旋轉180度，我一開始沒想起來，調了好久；

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    /*定義舞臺容器*/
    .panel {
      width: 800px;
      margin: 100px auto;
      perspective: 1300px;
      /*定義視距*/

    }

    .panel:hover ul {
      transform: rotateY(60deg)rotateZ(45deg);
    }

    /*立方體*/
    ul {
      width: 100px;
      height: 100px;
      margin: auto;
      position: relative;
      transform-style: preserve-3d;
      /*定義該立方體是個3D元素*/
      transform: rotateX(-30deg) rotateY(20deg);
      transition: all 2s;
      cursor: pointer;
    }

    /*立方體六個面*/
    li {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;

      font: 30px/100px "微軟雅黑";
      text-align: center;
      color: #fff;
      backface-visibility: hidden;
    }

    .front {
      transform: translateZ(50px);
      background: rgba(0, 255, 0, .6);
    }

    .back {
      transform: translateZ(-50px) rotateY(180deg);
      /*後面要旋轉繞Y軸180度，我一開始沒想起來，調了好久*/
      background: rgba(255, 0, 255, .6);
    }

    .left {
      transform: translateX(-50px) rotateY(-90deg);
      background: rgba(0, 0, 255, .6);
    }

    .right {
      transform: translateX(50px) rotateY(90deg);
      background: rgba(255, 255, 0, .6);
    }

    .top {
      transform: translateY(-50px) rotateX(90deg);
      background: rgba(255, 0, 0, .6);
    }

    .bottom {
      transform: translateY(50px) rotateX(-90deg);
      background: rgba(0, 255, 255, .6);
    }
  </style>
  <div class="panel">
    <ul>
      <li class="top">上</li>
      <li class="bottom">下</li>
      <li class="left">左</li>
      <li class="right">右</li>
      <li class="front">前</li>
      <li class="back">後</li>
    </ul>
  </div>

 

　　大神還整理了 transform 的反作用，請點擊：

• 設置了 transform:非none; 的元素，能夠覆蓋標準流元素和低級別的定位元素；
• webkit 內核瀏覽器下，若是父元素設置了 transform:非none; 那麼子元素的fixed效果會變成 absolute 效果；
• 更改定位父級 position:absolute; 定位的是祖先元素中第一個 position:非static 的元素；可是若是祖先元素中有設置了 transform:非none；也能夠被定位爲父級