transform:translate3d–詳細解析

一、概述

transform屬性是CSS3中非常重要的一個屬性之一，它可以對元素的變形進行操作，比如位移、旋轉、縮放等等。其中，translate3d函數可以將元素從當前位置（不改變元素的默認位置）沿着指定的坐標軸移動增加和減少距離。

其基本語法為：

transform:translate3d(tx, ty, tz);

其中tx，ty，tz分別表示元素在X、Y、Z軸上的位移距離，均為可選參數。如果參數是0，元素不會移動，如果是正數，元素會向正方向移動，如果是負數，元素會向負方向移動。

二、應用舉例

下面通過幾個實例來深入探討translate3d的使用方法。

1. 圖片懸浮效果

首先，我們來做一個鼠標懸浮時圖片變大的效果。

<style type="text/css">
    .image{
        width:200px;height:200px;
        margin:10px;border:2px solid #333;
        transition:all 1s;
    }
    .image:hover{
        transform:translate3d(-10px,-10px,0) scale(1.1);
        border-color:#f00;
    }
</style>
<div class="image"><img src="example.jpg"/></div>

以上代碼實現的效果是，鼠標懸浮到圖片上時，圖片會向左上方移動10像素，同時縮放1.1倍。

2. 無限滾動

我們也可以利用translate3d實現無限滾動的效果。例如，滾動的條目數量固定，但是我們要實現向左、向右的無限滾動效果。

<style type="text/css">
    .list{
        width:800px;height:200px;
        overflow:hidden;
        position:relative;
    }
    .item{
        width:200px;height:200px;
        position:absolute;top:0;left:0;
    }
    .a{background-color:#f00;}
    .b{background-color:#0f0;}
    .c{background-color:#00f;}
</style>

<div class="list">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
</div>

<script type="text/javascript">
    var items = document.querySelectorAll(".item");
    var length = items.length;
    var index = 0;
    setInterval(function(){
        for(var i=0;i<length;i++){
            items[i].style.transform = "translate3d("+(10*(i-index)%length)+"px,0,0)";
        }
        index = (index+1)%length;
    },100);
</script>

以上代碼實現的效果是，三個顏色塊可以左右無限滾動。

3. 輪播圖

我們也可以通過translate3d實現一些輪播圖效果，例如淡入淡出的輪播圖效果。

<style type="text/css">
    .carousel{
        width:800px;height:400px;
        position:relative;
        overflow:hidden;
    }
    .item{
        width:800px;height:400px;
        position:absolute;top:0;left:0;
        opacity:.3;
        transition:all 1s;
    }
    .active{opacity:1;}
</style>

<div class="carousel">
    <div class="item active"><img src="slide01.jpg"/></div>
    <div class="item"><img src="slide02.jpg"/></div>
    <div class="item"><img src="slide03.jpg"/></div>
    <div class="item"><img src="slide04.jpg"/></div>
</div>

<script type="text/javascript">
    var items = document.querySelectorAll(".item");
    var length = items.length;
    var index = 0;
    setInterval(function(){
        items[index].classList.remove("active");
        index = (index+1)%length;
        var next = items[index];
        next.classList.add("active");
        next.style.transform = "translate3d(0,0,0)";
        for(var i=0;i<length;i++){
            if(i!=index){
                items[i].style.transform = "translate3d(0,0,0)";
            }else{
                items[i].style.transform = "translate3d(0,0,1000px)";
            }
        }
    },3000);
</script>

以上代碼實現的效果是，圖片序列可以淡入淡出進行輪換。

三、總結

transform:translate3d是一個非常實用的CSS3屬性，可以實現諸如圖片滑動、輪播圖、無限滾動等效果。通過我們剛才的介紹，相信大家已經學會了如何使用它來改變元素的位置。