CSS3動畫屬性Transform解讀

時間 2019-11-20

標籤 css3 css 動畫屬性 transform 解讀欄目 CSS 简体版

原文原文鏈接

不管你是前端仍是設計師，相信你在網頁二維空間上的操做早已經駕輕就熟，JS處理時間線的動畫也早已經爛熟於胸。從今天開始，我跟你們分享一些「新」的東西，網頁的第三個維度，以及純CSS實現的動畫。限於篇幅，從初級到比較複雜的3D動畫大概會說個三四個回合，咱們就從最初級的東西開始說，因爲這些知識大部分都是我我的根據文檔所理解的，主要是當筆記。因此，也許會跟很多同窗所理解的不太同樣，甚至相悖，我但願你們能夠在文章下面指出不對的地方，咱們共同來學習。
css

在咱們之前使用絕對定位的時候就已經初步接觸過Z軸，那時候只是簡單的層疊，如今介紹一個更強大的屬性：Transform 。html

從字面上就能看出，Transform 是變型的意思，他的值主要包括旋轉rotate，扭曲skew，縮放scale，移動translate以及矩陣變形matrix 。前端

此次我主要拿 rotate 來寫例子，由於他能更好的配合後面3D的部分，其餘的幾個參數你們只須要挨個替換一下，就能明白他們的用法。css3

3D Transform 中 rotate 有三種方法，rotateX(angle) X軸旋轉，rotateY(angle) Y軸旋轉，rotateZ(angle) Z軸旋轉。web

XYZ表示一個平面以哪一個軸爲座標來旋轉，裏面的值是他的角度。爲了更形象一點，請看這張圖

瀏覽器

transform: perspective(800);

或者直接使用 perspective 屬性:app

perspective: 800;

perspective能夠寫在畫布（父元素）上，也能夠直接寫在元素自己上，對於一張畫布只有一個變型體的時候，幾乎沒有差異。可是當一個畫布上有多個變型體的時候，兩種寫法的差異當即就表現出來了。就像這張圖，黃色的部分，perspective直接寫在色塊上，紫色的部分，perspective寫在了父容器上，以畫布做爲透視元素，因此子元素的形態都是不同的。ide

perspective的值，則是決定3D變形效果的強度的，這個值大體能夠理解爲遠近。只越大，你離物體就越遠。就像一個離你很遠的正方體（好比魔方）在作旋轉，他的視覺效果就比較弱，可是若是這個魔方在你的眼前旋轉，那麼效果就比較強烈。
函數

而這裏咱們會用到一個新的Transform的參數，translateZ。學習

前面rotateZ已經讓咱們找到了Z軸，translateZ就能夠用來處理Z軸的座標。讓元素在本身的眼前或近或遠。他的值是要參考父元素的perspective值。

好比父元素的perspective值是800，那麼子元素translateZ的值越小，就表示子元素離咱們越遠，看起來也就越小。當子元素的 translateZ接近800可是小於800的時候，好比790+，那麼這個元素會撐滿整個屏幕（注意，會超出瀏覽器），由於這個時候表示這個元素已經到了你眼前，眼前就是一片小樹葉也是能夠遮擋住後面全部東西的。當子元素超過了800，就表示這個元素已經到了咱們眼睛後面，咱們是看不見本身後腦勺之後的東西的，元素就會消失不見。

（這裏稍微提一下，咱們上面那三個平面旋轉的圖，你們能看到在Y或者Y軸的旋轉到90度的時候，圖形消失了，這是由於90度的時候平面與咱們的視線平行，面是沒有厚度的，因此也會消失不見。當夾角變大以後又會從新出現，這個被成爲視覺盲區。）

簡單的講過透視以後，再來看一個屬性 perspective-origin ，透視原點。

這個屬性就很好理解了，就是透視點的位置，若是你會使用flash，那麼perspective-origin就至關於flash裏面的對齊點，當你作動畫處理的時候，元素會圍繞這個對齊點來旋轉什麼的。CSS3裏默認perspective-origin是元素的中心。

當有了透視，有了變型以後，就該用到transform-style這個屬性了，他有兩個參數，flat與preserve-3d。flat爲默認值，表示平面的；後者preserve-3d表示3D透視。

你們能夠簡單的理解爲這是開啓3D空間的方法：

transform-style: preserve-3d；

僅僅是開關，這個屬性不會對咱們的畫面形成任何影響，除非你用flat。

3D世界裏還有一個原理就是，你沒法穿過一個物體看到他後面的物體，除非這個物體是透明的，這裏咱們就用到一個屬性，backface-visibility，當他的值爲hidden的時候，就是正常的3D世界，當不寫這個屬性的時候…….我建議你們試試。

如今簡單的幾何原理都有了，咱們可讓平面變3D的過程動態的演示出來了，就是css3的 Animation ！

在瞭解Animation以前，咱們必須瞭解另外一個特殊的東西，Keyframes。

這裏用過flash的同窗一看就能明白，就是關鍵幀，每個關鍵幀表明動畫的一個過程節點，Keyframes具備其本身的語法規則，他的命名是由」@keyframes」開頭，後面緊接着是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不一樣時間段樣式規則，有點像咱們css的樣式寫法同樣。例如：

@-moz-keyframes name{
     0% {
       -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
       -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
       -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }

這裏，name是動畫的名稱，百分比裏邊只要寫你要實現的動畫就行，能夠寫位移啊，色值變化啊，透明度變化啊等等。

而後咱們再看一下Animation的幾個經常使用屬性：

animation-name:'name';/*動畫屬性名，也就是咱們前面keyframes定義的動畫名*/
animation-duration: 2s;/*動畫持續時間*/
animation-timing-function: linear;
/*
動畫頻率，有勻速，先快後慢    linear：動畫以勻速運動
ease：默認值，開始慢，中間快，結束慢，不對稱
ease-in：開始慢，後面快
ease-out：開始快，後面慢
ease-in-out：開始慢，中間快，結束慢，對稱（注意與ease的區別）
cubic-bezier(n,n,n,n)：可使用cubic-bezier自定義速度，n的取值從0到1
*/
animation-delay: 2s;/*動畫延遲時間*/
animation-iteration-count: 1;/*定義循環資料，infinite爲無限次*/
animation-direction: alternate;/*定義動畫方式， normal 動畫僅正向播放。 alternate 動畫正向播放奇數次迭代，並反向播放偶數次迭代。在反向播放週期中，與 animation-timing-function 關聯的值也會反轉。*/

這些屬性，看字面就能理解了，就不詳細解釋，用在例子裏是最形象的。這裏先寫一個簡單平面旋轉的例子，就本例子而言，webkit核心的瀏覽器處理變型跟動畫明顯是最好的，而moz下會有明顯的鋸齒出現。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{margin:0;
padding:0;}
.wrapper1{
    width:150px;
    height:191px;
    border:#eee 1px solid;
    border-radius:10px;
    padding:2px;
    float:left;
    margin:200px 0 0 50px;
    -moz-perspective:800px;
      -moz-transform-style:preserve-3d;
      -webkit-perspective:800px;
      -webkit-transform-style:preserve-3d;
      -moz-backface-visibility:;
    -webkit-backface-visibility:hidden;
}
.box1{
    width:150px;
    height:191px;
    background:url(http://www.internetke.com/uploads/imgbg/other/rut.jpg);
    border-radius:10px;
    -webkit-animation-name:wobble;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: ;
  -moz-animation-name:wobble;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-delay: 0;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: ;
}
@-webkit-keyframes wobble{
     0% {
          -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
          -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
          -webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
          -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
          -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }
@-moz-keyframes wobble{
     0% {
           -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
           -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
           -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
           -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
           -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }
</style>
</head>
<body>
<div class="wrapper1">
    <div class="box1"></div>
</div>
</body>
</html>

View Code

題外話：但願你們不要由於IE9如下版本的不兼容就延遲學習新的東西，那就會到處比別人慢一步。另外，從Safari開始，瀏覽器已經能夠由3D函數觸發硬件加速。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。