css3動畫之transform屬性與transition屬性的簡單使用（程式碼範例）

這篇文章帶給大家的內容是css3動畫之transform屬性與transition屬性的簡單使用（程式碼範例），讓大家了解css3的Transforms屬性和transition屬性是如何實現動畫變換的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

一、css3 Transform是什麼？有什麼作用？

Transform屬性套用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

Transform的作用是透過平移，旋轉或其他方式修改瀏覽器中元素的外觀。在樣式表中定義時，將在呈現頁面時套用轉換，因此您實際上看不到任何動畫。

下面我們放置了四個相同的DIV，其樣式為100 x 60像素的盒子，邊框為2像素。隨後，使用transform屬性以某種方式轉換每個元素：

效果圖：

##此範例的HTML和CSS程式碼如下：

<style type="text/css">

  .showbox {
    float: left;
    margin: 4em 1em;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
  }

</style>

<div class="showbox" style="transform: translate(3em,0);">box 1</div>
<div class="showbox" style="transform: rotate(30deg); border-color: red;">box 2</div>
<div class="showbox" style="transform: translate(-3em,1em);">box 3</div>
<div class="showbox" style="transform: scale(2);">box 4</div>
<div style="clear: left;"></div>

值得注意的是，即使在旋轉時，文字仍然可以在變換後的元素中進行選擇，並且縮放元素會影響包括邊框寬度和字體大小在內的屬性，而不僅僅是框架尺寸。

二、動畫的變換效果

transform屬性只能靜態的旋轉，縮放，移動，傾斜元素，但在和transition屬性一起連用，就可以實現動畫的變換效果，例：

您在上面看到的是上一節中的四個框，處於預設狀態。但是，當您將滑鼠懸停在任何框上時，CSS轉換將作為一秒動畫應用。當滑鼠移開時，動畫反轉，使每個框恢復到原始狀態。

我們可以在不使用JavaScript的情況下，只使用HTML和CSS就可以完成此操作！以下是「方框1」的完整程式碼，它向右和向後滑動：

<style type="text/css">

  .showbox {
    float: left;
    margin: 4em 1em;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;    
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
  }
  .showbox.slideright:hover {    -webkit-transform: translate(3em,0);
    -moz-transform: translate(3em,0);
    -o-transform: translate(3em,0);
    -ms-transform: translate(3em,0);
    transform: translate(3em,0);
  }

</style>

<div class="showbox slideright">方框1</div>

是不是覺得很酷，CSS動畫不僅可以應用於變換，還可以應用於其他CSS屬性，包括：不透明度，顏色和其他一些。大家也可以自己動手編譯不同的動畫效果，希望能對大家的學習有所幫助

以上是css3動畫之transform屬性與transition屬性的簡單使用（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！