css3動畫之transform屬性與transition屬性的使用案例

這篇文章將為大家詳細(xì)講解有關(guān)css3動畫之transform屬性與transition屬性的使用案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。

Transform的作用是通過平移，旋轉(zhuǎn)或其他方式修改瀏覽器中元素的外觀。在樣式表中定義時，將在呈現(xiàn)頁面時應(yīng)用轉(zhuǎn)換，因此您實際上看不到任何動畫。

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

效果圖：

此示例的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>

值得注意的是，即使在旋轉(zhuǎn)時，文本仍然可以在變換后的元素中進行選擇，并且縮放元素會影響包括邊框?qū)挾群妥煮w大小在內(nèi)的屬性，而不僅僅是框尺寸。

二、動畫的變換效果

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

您在上面看到的是上一節(jié)中的四個框，處于默認(rèn)狀態(tài)。但是，當(dāng)您將鼠標(biāo)懸停在任何框上時，CSS轉(zhuǎn)換將作為一秒動畫應(yīng)用。當(dāng)鼠標(biāo)移開時，動畫反轉(zhuǎn)，使每個框恢復(fù)到原始狀態(tài)。

我們可以在不使用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>

關(guān)于css3動畫之transform屬性與transition屬性的使用案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。