css3動畫由淺入深總結

時間 2019-11-12

標籤 css3 css 動畫由淺入深總結欄目 CSS 简体版

原文原文鏈接

閱讀目錄css

回到頂部

一：過渡動畫---Transitionshtml

一：過渡動畫---Transitionscss3

含義：在css3中，Transitions功能經過將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另外一個屬性值來實現動畫功能。web

Transitions屬性的使用方法以下所示：chrome

transition: property | duration | timing-function | delay瀏覽器

transition-property: 表示對那個屬性進行平滑過渡。dom

transition-duration: 表示在多長時間內完成屬性值的平滑過渡。ide

transition-timing-function 表示經過什麼方法來進行平滑過渡。函數

transition-delay: 定義過渡動畫延遲的時間。post

默認值是 all 0 ease 0

瀏覽器支持程度：IE10，firefox4+，opera10+，safari3+及chrome8+

下面是transitions過渡功能的demo以下：

HTML代碼以下：

<div class="transitions">transitions過渡功能</div>

CSS代碼以下：

.transitions {
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
}
.transitions:hover {
    background-color: #00ffff;
}

效果以下：

transitions過渡功能

若是想要過渡多個屬性，可使用逗號分割，以下代碼：

div { -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2. 咱們可使用Transitions功能同時平滑過渡多個屬性值。

以下HTML代碼：

<h2>transitions平滑過渡多個屬性值</h2>
<div class="transitions2">transitions平滑過渡多個屬性值</div>

css代碼以下：

.transitions2 {
        background-color:#ffff00;
        color:#000000;
        width:300px;
        -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
.transitions2:hover {
        background-color: #003366;
        color: #ffffff;
        width:400px;
}

效果以下：

transitions平滑過渡多個屬性值

注意：transition-timing-function 表示經過什麼方法來進行平滑過渡。它值有以下：

至於linear 線性咱們很好理解，能夠理解爲勻速運動，至於cubic-bezier貝塞爾曲線目前用不到，能夠忽略不計，咱們如今來理解下 ease, ease-in, easy-out 和 ease-in-out 等屬性值的含義；

ease: 先快後逐漸變慢；

ease-in: 先慢後快

easy-out: 先快後慢

easy-in-out: 先慢後快再慢

理解上面幾個屬性值，以下demo：

HTML代碼以下:

<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div>
</div>

CSS代碼以下：

.trans_box {
    background-color: #f0f3f9;
　　width:100%
}
.trans_list {
    width: 30%;
    height: 50px;
    margin:10px 0;
    background-color:blue;
    color:#fff;
    text-align:center;
}
.ease {
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    transition: all 4s ease;
}
.ease_in {
    -webkit-transition: all 4s ease-in;
    -moz-transition: all 4s ease-in;
    -o-transition: all 4s ease-in;
    transition: all 4s ease-in;
}
.ease_out {
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}
.ease_in_out {
    -webkit-transition: all 4s ease-in-out;
    -moz-transition: all 4s ease-in-out;
    -o-transition: all 4s ease-in-out;
    transition: all 4s ease-in-out;
}
.linear {
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    transition: all 4s linear;
}
.trans_box:hover .trans_list{
    margin-left:90%;
    background-color:#beceeb;
    color:#333;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    -o-border-radius:25px;
    border-radius:25px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

效果以下：

ease

ease-in

ease-out

ease-in-out

linear

回到頂部

二：Animations功能

Animations功能與Transitions功能相同，都是經過改變元素的屬性值來實現動畫效果的。它們的區別在於：使用Transitions功能是隻能經過指定屬性的開始值與結束值。而後在這兩個屬性值之間進行平滑過渡的方式來實現動畫效果，所以不能實現複雜的動畫效果；而Animations則經過定義多個關鍵幀以及定義每一個關鍵幀中元素的屬性值來實現更爲複雜的動畫效果。

語法：animations: name duration timing-function iteration-count;

name: 關鍵幀集合名（經過此名建立關鍵幀的集合）

duration: 表示在多長時間內完成屬性值的平滑過渡

timing-function: 表示經過什麼方法來進行平滑過渡

iteration-count: 迭代循環次數，可設置爲具體數值，或者設置爲infinite進行無限循環，默認爲1.

用法：@-webkit-keyframes 關鍵幀的集合名 {建立關鍵幀的代碼}

以下面的代碼：

@-webkit-keyframes mycolor {
   0% {background-color:red;}
   40% {background-color:darkblue;}
   70% {background-color: yellow;}
   100% {background-color:red;}
}
.animate:hover {
   -webkit-animation-name: mycolor;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function:linear;
}

如上：-webkit-animation-name屬性中指定關鍵幀集合的名稱，

-webkit-animation-duration屬性指定完成整個動畫所須要完成的時間，timing-function 值實現動畫的方法。

能夠看以下demo

HTML代碼以下：

<h2>使用animate實現更爲複雜的動畫</h2>
<div class="animate">使用animate實現更爲複雜的動畫</div>

CSS代碼以下：

.animate {background-color:red;height:100px;}
@-webkit-keyframes mycolor {
    0% {background-color:red;}
    40% {background-color:darkblue;}
    70% {background-color: yellow;}
    100% {background-color:red;}
}
@-moz-keyframes mycolor {
    0% {background-color:red;}
    40% {background-color:darkblue;}
    70% {background-color: yellow;}
    100% {background-color:red;}
}
        
.animate:hover {
    -webkit-animation-name: mycolor;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function:linear;

    -moz-animation-name: mycolor;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function:linear;
}

效果以下：

使用animate實現更爲複雜的動畫

回到頂部

三：translate(tx,ty)

translate(tx,ty)
tx 表明x軸(橫座標)移動的向量長度，當其值爲正數的時候，元素向X軸右方向移動，當其值爲負數的時候，元素向x軸的左方向移動。
ty 表明y軸(縱座標)移動的向量長度，當其值爲正數的時候，元素向Y軸下方向移動，當其值爲負數的時候，元素向Y軸的上方向移動。
translate()函數移動元素會有如下三種移動：
1. 水平移動：向右移動 translate(tx,0) 和向左移動 translate(-tx,0)
2. 垂直移動: 向下移動 translate(0,ty) 和向上移動 translate(0,-ty)
3. 對角移動：向右下角移動 translate(tx,ty),右上角移動 translate(tx,-ty),左下角移動 translate(-tx,ty),左上角移動 translate(-tx,-ty)
一：先來看看水平移動
原圖代碼以下：

 <div class="old">
       <h3>水平向右移動--原圖</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
   </div>
   /* 1. 向右移動 */
   HTML代碼：
   <div class="new">
       <h3>水平向右移動--移動的100px圖</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
   </div>
  /* 2. 向左移動： */
   HTML代碼：
    <div class="new new2" style="margin-top:180px;">
        <h3>水平向左移動--移動的100px圖</h3>
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
    </div>

向右移動效果以下：

水平向右移動--移動的100px圖

向左移動效果以下：

水平向左移動--移動的100px圖

二：垂直移動
3. 垂直向下移動：

HTML代碼以下：

<div class="new new3" style="margin-top:180px;">
       <h3>垂直向下移動--移動的10px圖</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
   </div>

4. 垂直向上移動：

<div class="new new4" style="margin-top:180px;">
        <h3>垂直向上移動--移動的10px圖</h3>
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
    </div>

對角移動也是同樣的，這裏很少介紹；

CSS全部代碼以下：

.old,.new {
        position:relative;
        width:500px;
        height:200px;
        margin:0 auto;
    }
    .new img {position: absolute;}
    .new img{
        -webkit-transform:translate(100px,0);
     }
     .new2 img {
        -webkit-transform:translate(-100px,0);
     }
     .new3 img {
        -webkit-transform:translate(0,10px);
     }
     .new4 img {
        -webkit-transform:translate(0,-10px);
     }

translateX(x): 水平方向移動一個對象，若是x值爲正的話，水平向右移動x距離，若是x值爲負數的話，水平向左移動x距離
translateY(y): 垂直方向移動一個對象，若是y值爲正的話，垂直向下移動y距離，若是y值爲負數的話，垂直向上移動y距離

回到頂部

四：scale(x,y)

scale(x,y)：縮放函數scale()讓元素根據中心原點對對象進行縮放，默認值爲1，小於1的話，是對該元素進行縮小，大於1的話，
是對該元素進行放大，它有2個參數，是對x軸和y軸放大多少倍的含義
HTML代碼以下：

 <div class="old11">
       <h3>原圖</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
    </div>
    <div class="new11">
       <h3>對x軸放大2倍，對Y軸放大2倍</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"  style="margin-top:60px;"/>
   </div>

css代碼以下：

div.old11,div.new11 {
      margin:0 auto;
      position:relative;
      width:500px;
   }
   .new11 img {position: absolute;}
   .new11 img{
      -webkit-transform:scale(2,2);
   }

效果以下：

原圖

對x軸放大2倍，對Y軸放大2倍

上面的咱們都是對縮放取正值，那若是是負值的話，會先讓元素進行翻轉，而後在進行縮放。
以下代碼：
HTML代碼以下：

<div class="old22">
       <h3>原圖</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
    </div>
    <div class="new22">
       <h3>對x軸放大2倍(取負值進行反轉)，對Y軸放大2倍</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"  style="margin-top:60px;"/>
   </div>

CSS代碼以下：

div.old22,div.new22 {
    margin:0 auto;
    position:relative;
    width:500px;
  }
  div.new22{height:300px;}
  .new22 img {position: absolute;}
  .new22 img{
    -webkit-transform:scale(-2,2);
  }

效果以下：

原圖

對x軸放大2倍(取負值進行反轉)，對Y軸放大2倍

回到頂部

五：rotate(x):

rotate(x): 旋轉函數經過指定的角度參數對元素根據對象原點指定一個2D旋轉，接受一個角度值，用來指定旋轉的幅度，若是是正值得話，
元素是相對原點中心順時針旋轉，若是是負值的話，元素是相對原點中心逆時針旋轉。
HTML代碼以下：

<div class="old33">
      <h3>原圖</h3>
      <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
  </div>
  <div class="new33">
      <h3>對原圖旋轉45度</h3>
      <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"  style="margin-top:20px;"/>
  </div>

CSS代碼以下：

div.old33,div.new33 {
    margin:0 auto;
     position:relative;
     width:500px;
  }
  div.new33 img{
     -webkit-transform:rotate(45deg);
  }

效果以下：

原圖

對原圖旋轉45度

回到頂部

5.1：skew(x,y)函數

skew(x,y)函數;可以讓元素傾斜顯示，能夠將對象以其中心位置圍繞着x軸和y軸安照必定的角度傾斜;
參數x的含義是：用來指定元素的水平方向(X軸方向)傾斜的角度。
參數y的含義是：用來指定元素的垂直方向(Y軸方向)傾斜的角度。若是未設置該值，其默認爲0.
skewX()：至關於skew(x,0)和skew(x)。按給定的角度沿X軸指定一個傾斜變形。skewX()使元素以其中心爲基點，並在水平方向（X軸）進行傾斜變形。
skewY()：至關於skew(0,y)。按給定的角度沿Y軸指定一個傾斜變形。skewY()用來設置元素以其中心爲基點並給定的角度在垂直方向（Y軸）傾斜變形。

以下偏斜20度的demo

HTML代碼以下：

<h2>transform屬性-skew傾斜的demo</h2>
<div class="skew">
    <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼以下：

.skew img {
    -webkit-transform:skew(0deg);
    -moz-transform:skew(0deg);
    -o-transform:skew(0deg);
    transition:1s all linear;
}
.skew {width:520px;height:280px;overflow:hidden;}
.skew img:hover {-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg)}

效果以下：

transform屬性-skew傾斜的demo

回到頂部

六：理解transform-origin屬性

默認狀況下，原點在元素的中心點，那麼該屬性的含義是：咱們就可使用transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到須要的原點位置。
transform-origin屬性能夠重置元素變形原點位置，其基本語法以下所示:

//只設置一個值的語法
transform-origin: x-offset
transform-origin:offset-keyword

//設置兩個值的語法
transform-origin：x-offset y-offset
transform-origin：y-offset x-offset-keyword
transform-origin：x-offset-keyword y-offset
transform-origin：x-offset-keyword y-offset-keyword
transform-origin：y-offset-keyword x-offset-keyword

// 設置三個值的語法
transform-origin：x-offset y-offset z-offset
transform-origin：y-offset x-offset-keyword z-offset
transform-origin：x-offset-keyword y-offset z-offset
transform-origin：x-offset-keyword y-offset-keyword z-offset
transform-origin：y-offset-keyword x-offset-keyword z-offset

transform-origin屬性值能夠是百分比、em、px等具體的值，也能夠是top、right、bottom、left和center這樣的關鍵詞。
2D的變形中的transform-origin屬性能夠是一個參數值，也能夠是兩個參數值。若是是兩個參數值時，第一值設置水平方向X軸的位置，第二個值是用來設置垂直方向Ｙ軸的位置。
3D的變形中的transform-origin屬性還包括了Ｚ軸的第三個值。
各取值含義以下：
x-offset: 用來設置transform-origin水平方向上X軸的偏移量，可使用<length>和<percentage>值，同時也能夠是正值（從中心點沿水平方向Ｘ軸向右偏移量），
也能夠是負值（從中心點沿水平方向Ｘ軸向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一個關鍵詞，能夠用來設置transform-origin的偏移量。
y-offset：用來設置transform-origin屬性在垂直方向Ｙ軸的偏移量，可使用<length>和<percentage>值，
同時能夠是正值（從中心點沿垂直方向Ｙ軸向下的偏移量），也能夠是負值（從中心點沿垂直方向Ｙ軸向上的偏移量）。
x-offset-keyword：是left、right或center中的一個關鍵詞，能夠用來設置transform-origin屬性值在水平Ｘ軸的偏移量。
y-offset-keyword：是top、bottom或center中的一個關鍵詞，能夠用來設置transform-origin屬性值在垂直方向Ｙ軸的偏移量。
z-offset：用來設置3D變形中transform-origin遠離用戶眼睛視點的距離，默認值z=0，其取值只能是<length>。

咱們下面來看下使用 transform：rotate對元素進行選擇效果以下：
1. 使用transform-origin對transform：rotate元素進行重置原點位置
HTML代碼以下：

<div class="transform-origin">
    <h3>默認使用中心點位置對元素進行旋轉效果</h3>
    <div class="old">
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
    </div>

    <h3>使用transform-origin來改變元素的中心點-使元素bottom成爲元素的起點位置對元素進行旋轉</h3>
    <div class="new">
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
    </div>
    </div>

css代碼以下：

.transform-origin div {
        width: 500px;
        height: 300px;
        position: relative;
    }
    .transform-origin div img {
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .transform-origin div img:nth-child(1){
        opacity: .5;
        z-index: 1;
        transform: rotate(10deg);
    }
    .transform-origin div img:nth-child(2){
        opacity: .6;
        z-index: 2;
        transform: rotate(25deg);
    }
    .transform-origin div img:nth-child(3){
        opacity: .7;
        z-index: 3;
        transform: rotate(35deg);
    }
    .transform-origin div img:nth-child(4){
        opacity: .8;
        z-index: 4;
        transform: rotate(45deg);
    }
    .transform-origin div img:nth-child(5){
        z-index: 5;
        transform: rotate(60deg);
    }
    .transform-origin .new img {
        transform-origin: bottom;
    }

效果以下：

默認使用中心點位置對元素進行旋轉效果

使用transform-origin來改變元素的中心點-使元素bottom成爲元素的起點位置對元素進行旋轉

2. 使用transform-origin對transform：scale元素進行重置原點位置
HTML代碼以下：

<div class="transform-origin-scale">
   <h3>默認使用中心點位置對元素進行縮放效果</h3>
    <div class="old">
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
    </div>

    <h3>使用transform-origin來改變元素的中心點-使元素left成爲元素的起點位置對元素進行縮放</h3>
    <div class="new">
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
    </div>
</div>

css代碼以下：

.transform-origin-scale div {
        width: 500px;
        height: 300px;
        position: relative;
    }
    .transform-origin-scale div img {
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .transform-origin-scale div img:nth-child(1){
        opacity: .5;
        z-index: 1;
        transform: scale(1.2);
    }
    .transform-origin-scale div img:nth-child(2){
        opacity: .6;
        z-index: 2;
        transform: scale(1.1);
    }
    .transform-origin-scale div img:nth-child(3){
        opacity: .7;
        z-index: 3;
        transform: scale(1);
    }
    .transform-origin-scale div img:nth-child(4){
        opacity: .8;
        z-index: 4;
        transform: scale(.8);
    }
    .transform-origin-scale div img:nth-child(5){
        z-index: 5;
        transform: scale(.5);
    }
    .transform-origin-scale .new img {
        transform-origin: left;
    }

效果以下：

默認使用中心點位置對元素進行縮放效果

使用transform-origin來改變元素的中心點-使元素left成爲元素的起點位置對元素進行縮放

3. 使用transform-origin對transform：skew元素（傾斜）進行重置原點位置
HTML代碼以下：

<div class="transform-origin-skew">
        <h3>默認使用中心點位置對元素進行傾斜效果</h3>
        <div class="old">
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        </div>

        <h3>使用transform-origin來改變元素的中心點-使元素bottom成爲元素的起點位置對元素進行傾斜</h3>
        <div class="new">
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
        </div>
    </div>

css代碼以下：

.transform-origin-skew div {
        width: 500px;
        height: 300px;
        position: relative;
    }
    .transform-origin-skew div img {
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .transform-origin-skew div img:nth-child(1){
        opacity: .5;
        z-index: 1;
        transform: skew(10deg);
    }
    .transform-origin-skew div img:nth-child(2){
        opacity: .6;
        z-index: 2;
        transform: skew(15deg);
    }
    .transform-origin-skew div img:nth-child(3){
        opacity: .7;
        z-index: 3;
        transform: skew(20deg);
    }
    .transform-origin-skew div img:nth-child(4){
        opacity: .8;
        z-index: 4;
        transform: skew(25deg);
    }
    .transform-origin-skew div img:nth-child(5){
        z-index: 5;
        transform: skew(30deg);
    }
    .transform-origin-skew .new img {
        transform-origin: bottom;
    }

效果以下：

默認使用中心點位置對元素進行傾斜效果

使用transform-origin來改變元素的中心點-使元素bottom成爲元素的起點位置對元素進行傾斜

回到頂部

七：理解transform-style屬性

transform-style：flat | preserve-3d

transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：flat和preserve-3d
其中flat值爲默認值，表示全部子元素在2D平面上呈現，沿着X軸或者Y軸在該元素平面上顯示，若是對一個元素
設置了transform-style的值爲preserve-3d，它表示不執行平展操做，他的全部子元素位於3D空間中。
下面咱們能夠來學習下使用 transform-style 實現3D效果：
HTML代碼以下：

<div class="transform-style">
    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度)</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>

    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate three-d">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>
    </div>

css代碼以下：

.transform-style .container {
        width:500px;
        height:300px;
        margin:10px auto;
        position:relative;
    }
    .transform-style .inner {
        width:142px;
        height:200px;
        position:absolute;
    }
    //設置動畫
    @keyframes inner{
        0%{
            transform:rotateY(0deg)
        }
        100%{
            transform:rotateY(360deg)
        }
    }
    //調用動畫
    .transform-style .inner:hover{
        animation:inner 5s linear infinite;
    }

    .transform-style .rotate {
        background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;
        border: 5px solid hsla(50,50%,50%,.9);
        transform: perspective(200px) rotateY(45deg);
    }
    .transform-style .rotate img{
        border: 1px solid green;
        transform: rotateX(15deg) translateZ(10px);
        transform-origin: 0 0 40px;
    }
    //改變transform-style的默認值
    .transform-style .three-d {
        transform-style: preserve-3d;
    }

效果以下：

鼠標放到圖片上面來查看效果哦！(圖片反轉360度)

鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)

注意：當元素設置transform-style: flat的時候或者加上overflow：hidden的時候，img的值不會根據translateZ的值攤開，而會在同一個平面上旋轉，
當元素設置了preserve-3d;的時候，其子元素img的值會根據translateZ的值攤開.

回到頂部

八：理解perspective屬性

該屬性咱們能夠理解爲視距，用來設置用戶和元素3D空間Z平面之間的距離。效果是由該值決定的，值越小，用戶與3D空間z平面距離越近，值越大，用戶與3D空間z平面距離越遠，視覺效果就越小。
其實該屬性上面已經使用到了; 再看看下面的demo
HTML代碼以下：

<div class="perspective">
    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度)</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>

    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，可是不使用perspective屬性</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate three-d">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>

    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，使用perspective屬性且值爲100px，值越小，用戶與3D空間z平面距離越近</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate three-d rotate2">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>

    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，使用perspective屬性且值爲200px,值越大，用戶與3D空間z平面距離越遠，視覺效果就越小</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate three-d rotate3">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>

    <h3>鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，使用perspective屬性且值爲400px,值越大，用戶與3D空間z平面距離越遠，視覺效果就越小</h3>
    <div class="container">
        <div class="inner">
            <div class="rotate three-d rotate4">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
            </div>
        </div>
    </div>
    </div>

css代碼以下：

.perspective .container {
        width:500px;
        height:300px;
        margin:10px auto;
        position:relative;
    }
    .perspective .inner {
        width:142px;
        height:200px;
        position:absolute;
    }
    @keyframes inner2{
        0%{
            transform:rotateY(0deg)
        }
        100%{
            transform:rotateY(360deg)
        }
    }
    .perspective .inner:hover{
        animation:inner2 5s linear infinite;
    }

    .perspective .rotate {
        background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;
        border: 5px solid hsla(50,50%,50%,.9);
        transform: rotateY(45deg);
    }
    .perspective .rotate img{
        border: 1px solid green;
        transform: rotateX(15deg) translateZ(10px);
        transform-origin: 0 0 40px;
    }
    .perspective .three-d {
         transform-style: preserve-3d; 
    }
    .perspective .rotate2 {
        transform: perspective(150px) rotateY(45deg);
    }
    .perspective .rotate3 {
        transform: perspective(200px) rotateY(45deg);
    }
    .perspective .rotate4 {
        transform: perspective(400px) rotateY(45deg);
    }

效果以下：

鼠標放到圖片上面來查看效果哦！(圖片反轉360度)

鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，可是不使用perspective屬性

鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，使用perspective屬性且值爲100px，值越小，用戶與3D空間z平面距離越近

鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，使用perspective屬性且值爲200px,值越大，用戶與3D空間z平面距離越遠，視覺效果就越小

鼠標放到圖片上面來查看效果哦！(圖片反轉360度--使用transform-style: preserve-3d;效果)，使用perspective屬性且值爲400px,值越大，用戶與3D空間z平面距離越遠，視覺效果就越小

基本語法以下：

perspective: none | <length>

該屬性默認值爲none，表示無限的角度來看3D物體，但看上去是平的,另外一個值爲<length> 接受一個長度單位大於0的值，可是該單位不能爲百分比，<length>值越大，角度出現的越遠，至關低的強度和很是小的3D空間變化，反之，此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化。再來看一個以下demo：HTML代碼以下：

<div class="perspective-nd">
        <h3>perspective值爲1000px的效果以下：perspective: 1000px;該值越大，角度出現的越遠，至關低的強度和很是小的3D空間變化</h3>
        <div class = "container">
            <div class="inner">
                <div class="side front">1</div>
                <div class="side back">2</div>
                <div class="side right">3</div>
                <div class="side left">4</div>
                <div class="side top">5</div>
                <div class="side bottom">6</div>
            </div>
        </div>
        <h3>perspective值爲200px的效果以下：此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化。</h3>
        <div class = "container">
            <div class="inner inner2">
                <div class="side front">1</div>
                <div class="side back">2</div>
                <div class="side right">3</div>
                <div class="side left">4</div>
                <div class="side top">5</div>
                <div class="side bottom">6</div>
            </div>
        </div>
    </div>

CSS代碼以下：

.perspective-nd .container {
        width:500px;
        height:300px;
        margin:10px auto;
        position:relative;
    }
    .perspective-nd .inner {
        font-size: 4em;
        width: 2em;
        margin: 1.5em auto;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(32deg);
        perspective: 1000px;
    }
    .perspective-nd .side {
        position: absolute;
        width: 2em;
        height: 2em;
        background: rgba(255, 99, 71, 0.6);
        border: 1px solid rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 2em;
    }
    .perspective-nd .front {
        transform: translateZ(1em);
    }
    .perspective-nd .top {
        transform: rotateX(90deg) translateZ(1em);
    }
    .perspective-nd .right {
        transform: rotateY(90deg) translateZ(1em);
    }
    .perspective-nd .left {
        transform: rotateY(-90deg) translateZ(1em);
    }
    .perspective-nd .bottom {
        transform: rotateX(-90deg) translateZ(1em);
    }

    .perspective-nd .back {
        transform: rotateY(-180deg) translateZ(1em);
    }
    .perspective-nd .inner2 {
        perspective: 200px;
    }

效果以下：

perspective值爲1000px的效果以下：perspective: 1000px;該值越大，角度出現的越遠，至關低的強度和很是小的3D空間變化

perspective值爲200px的效果以下：此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化。

回到頂部

九：理解perspective-origin屬性

該屬性是3D當中另一個屬性，主要用來決定perspective屬性的源點角度。它實際上設置了X軸和Y軸位置，在該位置觀看者好像在觀看該元素的子元素。perspective-origin屬性須要與perspective屬性結合起來使用，以便將視點移至元素的中心之外位置。perspective-origin屬性必須定義父元素上。
perspective-origin屬性的默認值爲 50% 50%（也就是center），能夠設置一個值，也能夠設置2個長度值。第一個長度值相對於元素的包含框的X軸上的位置，該屬性能夠是長度值，也能夠是百分比，或者是如下三個值其中一個，left(表示在包含框x軸方向的長度0%);center（表示中間點），right(表示長度爲100%)。第二個長度值指定相對於元素的包含框Y軸上的位置，它也能夠是長度值，百分比，或者如下三個值其中一個，top(表示在包含框Y軸方向長度的0%)，center(表示中間點)，bottom(表示長度100%);
下面咱們繼續看看上面的demo;
HTML代碼以下：

<div class="perspective-origin">
    <h3>perspective值爲1000px的效果以下：perspective: 1000px;該值越大，角度出現的越遠，至關低的強度和很是小的3D空間變化</h3>
    <div class = "container">
        <div class="inner">
            <div class="side front">1</div>
            <div class="side back">2</div>
            <div class="side right">3</div>
            <div class="side left">4</div>
            <div class="side top">5</div>
            <div class="side bottom">6</div>
        </div>
    </div>
    </div>

CSS代碼以下：

.perspective-origin .container {
        width:500px;
        height:300px;
        margin:10px auto;
        position:relative;
    }
    .perspective-origin .inner {
        font-size: 4em;
        width: 2em;
        margin: 1.5em auto;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(32deg);
        perspective: 1000px;
        animation: move-origin infinite 2s;
    }
    .perspective-origin .side {
        position: absolute;
        width: 2em;
        height: 2em;
        background: rgba(255, 99, 71, 0.6);
        border: 1px solid rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 2em;
    }
    .perspective-origin .front {
        transform: translateZ(1em);
    }
    .perspective-origin .top {
        transform: rotateX(90deg) translateZ(1em);
    }
    .perspective-origin .right {
        transform: rotateY(90deg) translateZ(1em);
    }
    .perspective-origin .left {
        transform: rotateY(-90deg) translateZ(1em);
    }
    .perspective-origin .bottom {
        transform: rotateX(-90deg) translateZ(1em);
    }

    .perspective-origin .back {
        transform: rotateY(-180deg) translateZ(1em);
    }
    @keyframes move-origin {
      0% {
        perspective-origin: 0%  0%;
      }
      25% {
        perspective-origin: 100%  0%;
      }
      50% {
        perspective-origin: 100% 100%;
      }
      75% {
        perspective-origin: 0%  100%;
      }
      100% {
        perspective-origin: 0%   0%;
      }
    }

效果以下：

perspective值爲1000px的效果以下：perspective: 1000px;該值越大，角度出現的越遠，至關低的強度和很是小的3D空間變化

詳細的能夠看這裏 https://css-tricks.com/almanac/properties/p/perspective-origin/

回到頂部

十：理解backface-visibility屬性

backface-visibility屬性決定元素旋轉背面是否可見，對於未旋轉的元素，該元素是正面面向咱們的，可是當其Y軸旋轉約180度時會致使元素的背面面對觀衆。
backface-visibility基本語法以下：
backface-visibility: visible | hidden
visible含義是：爲backface-visibility的默認值，表示反面可見
hidden含義是：表示反面不可見。
backface-visibility屬性可用於隱藏內容的背面。默認狀況下，背面可見，這意味着即便在翻轉後，旋轉的內容仍然可見。但當backface-visibility設置爲hidden時，旋轉後內容將隱藏，由於旋轉後正面將再也不可見。
HTML代碼以下：

<div class="backface-visibility">
        <h3>backface-visibility:hidden;背面不可見</h3>
        <div class = "container">
            <div class="inner">
                <div class="side front">1</div>
                <div class="side back">2</div>
                <div class="side right">3</div>
                <div class="side left">4</div>
                <div class="side top">5</div>
                <div class="side bottom">6</div>
            </div>
        </div>

        <h3>背面可見，在2，3，6方塊設置backface-visibility:visible;</h3>
        <div class = "container">
            <div class="inner">
                <div class="side front">1</div>
                <div class="side back slide2">2</div>
                <div class="side right slide2">3</div>
                <div class="side left">4</div>
                <div class="side top">5</div>
                <div class="side bottom slide2">6</div>
            </div>
        </div>
    </div>

CSS代碼以下：

.backface-visibility .container {
        width:500px;
        height:300px;
        margin:10px auto;
        position:relative;
    }
    .backface-visibility .inner {
        font-size: 4em;
        width: 2em;
        margin: 1.5em auto;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(32deg);
        perspective: 1000px;
        animation: move-origin33 infinite 2s;
    }
    .backface-visibility .side {
        position: absolute;
        width: 2em;
        height: 2em;
        background: rgba(255, 99, 71, 0.6);
        border: 1px solid rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 2em;
        backface-visibility:hidden;
    }
    .backface-visibility .front {
        transform: translateZ(1em);
    }
    .backface-visibility .top {
        transform: rotateX(90deg) translateZ(1em);
    }
    .backface-visibility .right {
        transform: rotateY(90deg) translateZ(1em);
    }
    .backface-visibility .left {
        transform: rotateY(-90deg) translateZ(1em);
    }
    .backface-visibility .bottom {
        transform: rotateX(-90deg) translateZ(1em);
    }

    .backface-visibility .back {
        transform: rotateY(-180deg) translateZ(1em);
    }
    @keyframes move-origin33 {
      0% {
        perspective-origin: 0%  0%;
      }
      25% {
        perspective-origin: 100%  0%;
      }
      50% {
        perspective-origin: 100% 100%;
      }
      75% {
        perspective-origin: 0%  100%;
      }
      100% {
        perspective-origin: 0%   0%;
      }
    }
    .backface-visibility  .slide2 {
        backface-visibility:visible;
    }

效果以下：

backface-visibility:hidden;背面不可見

背面可見，在2，3，6方塊設置backface-visibility:visible;

回到頂部

十一：css3中3D變換--translateZ()和translate3d()

css3中3D變換主要包括如下幾種功能函數：
1. 3D位移：css3中3D位移主要包括translateZ()和translate3d()兩個功能函數；
2. 3D旋轉：css3中3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；
3. 3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；
4. 3D矩陣：CSS3中3D變形中和2D變形同樣也有一個3D矩陣功能函數matrix3d()。
一：css3 3D位移
在CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數使一個元素在三維空間移動。
它使使用三維向量的座標定義元素在每一個方向移動多少。其基本語法以下：
1. translate3d(tx,ty,tz)
各個值的含義以下：
tx: 表明橫向座標位移向量的長度；
ty: 表明縱向座標位移向量的長度；
tz: 表明z軸位移向量的長度；該值不能取百分比的值; 不然無效;
下面咱們來看一個demo以下：
HTML代碼以下：

<div class="kongzhi">
<div class="kz1 k1">
    <div class="container">
        <img src="./1.jpg"/>
        <img src="./2.jpg"/>
    </div>
</div>
<div class="kz1 k2">
    <div class="container">
        <img src="./1.jpg"/>
        <img src="./2.jpg"/>
    </div>
</div>
</div>

css代碼以下：

.kz1 {
    width:300px;
    height:300px;
    float:left;
    position:relative;
    margin:20px;
    -webkit-perspective:1200px;
    perspective: 1200px;
    overflow: hidden;
}

.kongzhi .container {
    position: absolute;
    -webkit-transform-style:preserve-3d;
    transform-style: preserve-3d;
}
.kongzhi .container img {
    position: absolute;
    width:200px;
    height:200px;
}
.kongzhi .container img:nth-child(1){
    z-index: 1;
    opacity: .5;
}
.k1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translate3d(100px,100px,200px);
    transform: translate3d(100px,100px,200px);
}
.k2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translate3d(100px,100px,-200px);
    transform: translate3d(100px,100px,-200px);
}

效果本身運行下~

如上效果；當z軸值越大，元素離用戶更近，從視覺角度來說，元素變得更大，反之：當該值越小的話，
元素離用戶更遠，從視覺角度來說，元素變得越小。

回到頂部

十二：css3 3D縮放

該函數的功能是讓元素在3D空間沿Z軸進行位移。
該參數t的含義是：z軸的向量位移長度。
使用translateZ()函數可讓元素在Z軸進行位移，當其值爲負值時或者值越小的話，元素在Z軸越移越遠，致使元素變得較小。
反之，當其值爲正值時，元素在Z軸越移越近，致使元素變得較大
咱們再來看一下demo以下：
HTML代碼以下：

<div class="demo">
    <h4 class="title">舞臺視角大小201像素，子元素translateZ值爲: <span id="translateZ" class="translateZ">0</span>px;</h4>
    <p class="range_area">-100 
        <input type="range" id="range" min="-100" max="300" step="5" value="0" autocomplete="off" /> 300
    </p>
    <div id="stage" class="container">
        <div class="piece"></div>
    </div>
</div>

css代碼以下：

.demo {width:500px;margin:10px;border:1px solid red;}
.demo .title {text-align: center;font-size: 1em;}
.translateZ {color:red;}
.range_area {text-align: center;}
.range_area input {position:relative;width:300px;z-index:100;}
.demo .container {
    width:400px;
    height:100px;
    padding:50px;
    background:#f0f0f0;
    box-shadow: inset 0 0 3px rgba(0,0,0,.35);
    -webkit-transition: top .5s;
    -moz-perspective: 201px;
    -webkit-perspective: 201px;
    perspective: 201px;
    position: relative;
    z-index: 2;
    top: 0;
}
.piece {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color:red;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

JS代碼以下：

(function(){
    var randomColor = function(){
        return "hsla("+Math.round(360 * Math.random())+","+"60%,50%,.75)";
    };
    // css transform 變換
    var transform = function(element, value, key) {
        key = key || "Transform";
        ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
            element.style[prefix + key] = value;    
        }); 
        
        return element;
    };
    var $ = function(selector) {
        return document.querySelector(selector);
    };
    // 獲取元素
    var eleStage = $("#stage"),
        range = $("#range"),
        piece = $(".piece"),
        translateZ = $("#translateZ");

    // 添加時間監聽器
    range.addEventListener("change",function(){

        transform(piece,"translateZ("+this.value+"px)");
        translateZ.innerHTML = this.value;
    });
    console.log(range.value);
    transform(piece,"translateZ("+range.value+"px)");

    piece.style.backgroundColor = randomColor();
})();

效果以下：

fiddler上查看效果

回到頂部

十三：CSS3 3D旋轉和縮放

1.css3 3D縮放

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時爲1，即scale3d(1,1,z)，其效果等同於scaleZ(z)。經過使用3D縮放函數，可讓元素在Z軸上按比例縮放。默認值爲１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小。其使用語法以下：
scale3d(sx,sy,sz)
參數說明以下：
sx：橫向縮放比例；
sy：縱向縮放比例；
sz：Z軸縮放比例；
scaleZ(z):
z的含義是：指定元素每一個點在Z軸的比例
注意：scaleZ()和scale3d()函數單獨使用時沒有任何效果，須要配合其餘的變形函數一塊兒使用纔會有效果。下面咱們來看一個實例，
爲了能看到scaleZ()函數的效果，咱們添加了一個rotateX(45deg)功能：
HTML代碼以下：

<div class="kd">
    <h3>css3 3D縮放函數scale(5),大於1</h3>
    <div class="kz1 k1">
        <div class="container">
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
        </div>
    </div>

    <h3>css3 3D縮放函數scale(.25),小於1</h3>
    <div class="kz1 k2">
        <div class="container">
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
            <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
        </div>
    </div>
    </div>

CSS代碼以下：

 .kd .kz1 {
        width:300px;
        height:300px;
        float:left;
        position:relative;
        margin:20px;
        -webkit-perspective:1200px;
        perspective: 1200px;
        overflow: hidden;
    }

   .kd  .container {
        position: absolute;
        -webkit-transform-style:preserve-3d;
        transform-style: preserve-3d;
    }
   .kd  .container img {
        position: absolute;
        width:200px;
        height:200px;
    }
   .kd  .container img:nth-child(1){
        z-index: 1;
        opacity: .3;
    }
   .kd  .k1 img:nth-child(2){
        z-index: 2; 
        -webkit-transform: scaleZ(5) rotateX(45deg);
        -moz-transform: scaleZ(5) rotateX(45deg);
        -ms-transform: scaleZ(5) rotateX(45deg);
        -o-transform: scaleZ(5) rotateX(45deg);
        transform: scaleZ(5) rotateX(45deg);
    }
   .kd  .k2 img:nth-child(2){
        z-index: 2; 
        -webkit-transform: scaleZ(.25) rotateX(45deg);
        -moz-transform: scaleZ(.25) rotateX(45deg);
        -ms-transform: scaleZ(.25) rotateX(45deg);
        -o-transform: scaleZ(.25) rotateX(45deg);
        transform: scaleZ(.25) rotateX(45deg);
    }

效果以下：

css3 3D縮放函數scale(5),大於1

css3 3D縮放函數scale(.25),小於1

2. CSS3 3D旋轉

CSS3新增三個旋轉函數：rotateX()、rotateY()和rotateZ()。
rotateX()函數指定一個元素圍繞X軸旋轉，旋轉的量被定義爲指定的角度；若是值爲正值，元素圍繞X軸順時針旋轉；反之，若是值爲負值，元素圍繞X軸逆時針旋轉。其基本語法以下：
rotateX(a);
其中a指的是一個旋轉角度值.
rotateY()函數指定一個元素圍繞Y軸旋轉，旋轉的量被定義爲指定的角度；若是值爲正值，元素圍繞Y軸順時針旋轉；
反之，若是值爲負值，元素圍繞Y軸逆時針旋轉。其基本語法以下：
rotateY(a);
rotateZ()函數和其餘兩個函數功能同樣的，區別在於rotateZ()函數指定一個元素圍繞Z軸旋轉。其基本語法以下：
rotateZ(a);
rotateZ()函數指定元素圍繞Z軸旋轉，若是僅從視覺角度上看，rotateZ()函數讓元素順時針或逆時針旋轉，而且效果和rotate()效果等同，但他不是在2D平面的旋轉。在三維空間裏，除了rotateX()、rotateY()和rotateZ()函數可讓一個元素在三維空間中旋轉以外，還有一個屬性rotate3d()函數。
在3D空間，旋轉有三個程度的自由來描述一個轉動軸。軸的旋轉是由一個[x,y,z]向量並通過元素原點。
語法以下：rotate3d(x,y,z,a)
x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，若是其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。
下面看看demo以下：

<div class="rotateXYZ">
            <h3>css3 3D旋轉函數rotateX旋轉45度</h3>
            <div class="kz1 k1">
                <div class="container">
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
                </div>
            </div>
        </div>
        <div class="rotateXYZ">
            <h3>css3 3D旋轉函數rotateY旋轉45度</h3>
            <div class="kz1 k2">
                <div class="container">
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
                </div>
            </div>
        </div>
        <div class="rotateXYZ">
            <h3>css3 3D旋轉函數rotateZ旋轉45度</h3>
            <div class="kz1 k3">
                <div class="container">
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
                </div>
            </div>
        </div>
        
        <div class="rotateXYZ">
            <h3>css3 3D旋轉函數rotate3d</h3>
            <div class="kz1 k4">
                <div class="container">
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
                </div>
            </div>
        </div>

CSS代碼以下：

.rotateXYZ {
                float:left;
                width:100%;
            }
            .rotateXYZ .kz1 {
                width:300px;
                height:200px;
                float:left;
                position:relative;
                margin:20px;
                -webkit-perspective:1200px;
                perspective: 1200px;
                overflow: hidden;
            }

            .rotateXYZ .container {
                position: absolute;
                -webkit-transform-style:preserve-3d;
                transform-style: preserve-3d;
            }
            .rotateXYZ .container img {
                position: absolute;
                width:200px;
                height:200px;
            }
           .rotateXYZ .container img:nth-child(1){
                z-index: 1;
                opacity: .3;
            }
            .rotateXYZ .k1 img:nth-child(2){
                z-index: 2; 
                -webkit-transform:rotateX(45deg);
                -moz-transform:rotateX(45deg);
                -ms-transform:rotateX(45deg);
                -o-transform:rotateX(45deg);
                transform:rotateX(45deg);
            }
            .rotateXYZ .k2 img:nth-child(2){
                z-index: 2; 
                -webkit-transform:rotateY(45deg);
                -moz-transform:rotateY(45deg);
                -ms-transform:rotateY(45deg);
                -o-transform:rotateY(45deg);
                transform:rotateY(45deg);
            }
            .rotateXYZ .k3 img:nth-child(2){
                z-index: 2; 
                -webkit-transform:rotateZ(45deg);
                -moz-transform:rotateZ(45deg);
                -ms-transform:rotateZ(45deg);
                -o-transform:rotateZ(45deg);
                transform:rotateZ(45deg);
            }
            .rotateXYZ .k4 img:nth-child(2){
                z-index: 2; 
                -webkit-transform:rotate3d(.6,1,.6,45deg);
                -moz-transform:rotate3d(.6,1,.6,45deg);
                -ms-transform:rotate3d(.6,1,.6,45deg);
                -o-transform:rotate3d(.6,1,.6,45deg);
                transform:rotate3d(.6,1,.6,45deg);
            }

效果以下：

css3 3D旋轉函數rotateX旋轉45度

css3 3D旋轉函數rotateY旋轉45度

css3 3D旋轉函數rotateZ旋轉45度

css3 3D旋轉函數rotate3d

回到頂部

十四：淡入淡出效果

先實現一個簡單的鼠標移上圖片的淡入淡出效果；鼠標懸停經過透明與不透明來實現效果；代碼以下：

HTML代碼：

<div class="anim_fade_image" style="width:200px;height:200px;background:blue;"></div>
    <div style="width:200px;height:200px;background:red;"></div>

CSS代碼以下：

.anim_fade_image {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.anim_fade_image:hover{
opacity:0;
filter: alpha(opacity=0);
}

效果以下：

上面是演示經過在指定的時間內經過透明與不透明來實現效果的，而且是當鼠標移入圖片上去進行的，接下來咱們使用動畫來實現每隔多少秒自動實現動畫，使用動畫屬性 iteration-count：infinite進行無限循環。

HTML代碼以下：

<div class="anim_fade_image" style="width:200px;height:200px;background:blue;"></div>
    <div style="width:200px;height:200px;background:red;"></div>

CSS代碼以下：

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
      position:absolute;    
     -webkit-animation: fadeInOut 5s ease-in-out infinite;
}

效果以下：

如上都是經過圖片的透明度來實現圖片的淡入淡出效果。

回到頂部

十五：圖片輪轉縮放顯示動畫

如今有這麼一個動畫，頁面上有2張圖片，第一張圖片默認透明度爲0，隱藏掉，且縮放比例爲0；默認顯示第二張圖片，當我鼠標移動到那個容器上面的時候，第一張圖片顯示出來，且縮放放大一倍；第二張圖片旋轉360度，而且逐漸縮放到0；這麼一個效果以下代碼：

<div class="container">
<div class="anim_image anim_image_top" style="width:200px;height:200px;background:blue;"></div>
<div class="anim_image anim_image_bottom" style="width:200px;height:200px;background:red;"></div>
</div>

CSS代碼以下：

.anim_image {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.anim_image_top {
position: absolute;
-webkit-transform:scale(0);
opacity: 0;
filter: Alpha(opacity=0);
}
.container:hover .anim_image_top{
opacity: 1;
filter: Alpha(opacity=100);
-webkit-transform: scale(1, 1);        
}
.container:hover .anim_image_bottom{
-webkit-transform:rotate(360deg) scale(0,0);
    }

效果以下：

1111

22222

回到頂部

十六：輪播效果切換

HTML代碼以下：

<div class="trans_box">
<div id="transImageBox" class="trans_image_box">
    <div class="trans_image" style="width:300px;height:200px;background:blue;">111</div>
    <div class="trans_image" style="width:300px;height:200px;background:red;">222</div>
    <div class="trans_image" style="width:300px;height:200px;background:orange;">333</div>
</div>
<div id="transImageTrigger" class="trans_image_trigger">
    <a href="#1">圖片1</a>　<a href="#2">圖片2</a>　<a href="#3">圖片3</a>
</div>
    </div>

CSS代碼以下：

.trans_box {width:300px;overflow:hidden;}
.trans_image_box {
width:20000px;
height:200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.trans_image_box .trans_image {float:left;width:200px;}
.trans_image_trigger {
padding-top: 10px;
text-align: center;
    }

JS代碼以下：

var $ = function(id) {
    return document.getElementById(id);
};
var $box = $("transImageBox"),
$oTrigger = $("transImageTrigger").getElementsByTagName("a"),
$len = $oTrigger.length;
for(var i = 0; i < $len; i++) {
   $oTrigger[i].onclick = function(){
       var index = Number(this.href.replace(/.*#/g,'')) || 1;
       $box.style.marginLeft = (1 - index) * 300 + "px";
       return false;
   };
}

查看效果

回到頂部

十七：純css3實現輪播效果

HTML代碼以下：

<div class="slide-container">
            <input type="radio" name="slider2" id="slider1" checked="checked" >
            <input type="radio" name="slider2" id="slider2" >
            <input type="radio" name="slider2" id="slider3" >
            <input type="radio" name="slider2" id="slider4" >
            <div class="slide_bd">
                <ul class="list">
                    <li>
                        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
                    </li>
                    <li>
                        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
                    </li>
                    <li>
                        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg"/>
                    </li>
                    <li>
                        <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg"/>
                    </li>
                </ul>
            </div>
            <div class="num">
                <label for="slider1"></label>
                <label for="slider2"></label>
                <label for="slider3"></label>
                <label for="slider4"></label>
            </div>
        </div>

CSS代碼以下：

 ul,li{list-style:none;}
        .slide-container {position:relative;width:384px;height:512px;margin:0 auto;text-align:center;overflow:hidden;}
        .slide-container input{display:none;}

        .slide_bd {position:absolute;width:100%;height:100%;overflow:hidden;}

        .slide_bd .list {position:absolute;left:0;top:0;width:400%;height:100%;-webkit-transition:left .5s ease-out;-moz-transition:left .5s ease-out;-o-transition:left .5s ease-out;-ms-transition:left .5s ease-out;transition:left .5s ease-out;}

        .slide_bd .list li {float:left;}

        /*  #slider1:checked~.slide_bd .list含義是：匹配#slider1選中的 後面的.slide_bd .list的元素 */
        /* ~ 是兄弟元素選擇器 E~F：匹配位於E元素後面的F元素*/

        #slider1:checked~.slide_bd .list{left:0;}
        #slider2:checked~.slide_bd .list{left:-100%;}
        #slider3:checked~.slide_bd .list{left:-200%;}
        #slider4:checked~.slide_bd .list{left:-300%;}

        .slide_bd .list img{display:block;width:384px;height:512px;overflow:hidden;}

        .num {position:absolute;bottom:10px;width:100%;}

        .num label {display:inline-block;width:10px;height:10px;border-radius:10px;margin:0 5px;background:#999;}

        /* 鼠標移動上去的時候 */
        .num label:hover,
        #slider1:checked~.num label:nth-child(1),
        #slider2:checked~.num label:nth-child(2),
        #slider3:checked~.num label:nth-child(3),
        #slider4:checked~.num label:nth-child(4){
            background:#f00;
            cursor:pointer;
            -webkit-transform:scale(1.3);
            -moz-transform:scale(1.3);
            -o-transform:scale(1.3);
            -ms-transform:scale(1.3);
            transform:scale(1.3)
        }

效果以下：

1 2 3 4

回到頂部

十八：圖片旋轉木馬效果實現

基本原理：

1.首先咱們須要讓圖片能旋轉的效果，咱們讓全部圖片絕對定位(position:absolute),共用一箇中心點。
2.對於舞臺咱們加一個視距，好比下面的demo是 perspective: 800px;
3.對於容器咱們能夠加一個3D視圖 transform-style: preserve-3d;
4. 對於圖片旋轉，咱們要使用在旋轉 rotateY,可是一圈是360度，而圖片共九張，所以每一張的圖片旋轉的角度是40度；
所以咱們能夠在css下這樣寫代碼：
img:nth-child(1) { transform: rotateY( 0deg ); }
img:nth-child(2) { transform: rotateY( 40deg ); }
img:nth-child(3) { transform: rotateY( 80deg ); }
img:nth-child(4) { transform: rotateY( 120deg ); }
img:nth-child(5) { transform: rotateY( 160deg ); }
img:nth-child(6) { transform: rotateY( 200deg ); }
img:nth-child(7) { transform: rotateY( 240deg ); }
img:nth-child(8) { transform: rotateY( 280deg ); }
img:nth-child(9) { transform: rotateY( 320deg ); }
可是僅僅這樣是不行的，咱們能夠看下以下圖效果：

每張圖片在同一個點上，咱們須要拉開圖片的距離，所以須要使用到translateZ這個函數，可是須要拉開距離多少呢？
以下有一個計算方式計算：先看以下圖：

上圖中紅色標註的r就是的demo頁面中圖片要translateZ的理想值（該值可讓全部圖片無縫圍成一個圓）！
r = 64 / Math.tan(20 / 180 * Math.PI)
由於每張圖片的大小都是128px，那麼通常就是64px了；而後根據正切值來計算半徑便可；

下面是HTML代碼以下：

<div class="d-rotate">
            <h3>3d旋轉效果--點擊任意圖片瀏覽</h3>
            <div id="stage" class="d_stage_area">
                
                <div id="container" class="container">
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg" width="128" height="96" id="img1"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg" width="128" height="96" id="img2"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg" width="128" height="96" id="img3"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg" width="128" height="96" id="img4"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010350285-1813069804.jpg" width="128" height="96" id="img5"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010410801-943411344.jpg" width="128" height="96" id="img6"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010430395-1452487381.jpg" width="128" height="96" id="img7"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010447332-2127426646.jpg" width="128" height="96" id="img8"/>
                    <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010506613-1828415192.jpg" width="128" height="96" id="img8"/>
                </div>
            </div>
        </div>

CSS代碼以下：

.d-rotate {margin:10px;}
            .d-rotate h3 {text-align: center;font-size: 1em;}
            .d_stage_area {
                position:relative;
                top: 0;
                width:800px;
                min-height: 100px;
                padding: 100px;
                background:#f0f0f0;
                border:1px solid red;   
                -webkit-perspective:800px;
                -moz-perspective: 800px;
                perspective: 800px;
                -webkit-transition: top .5s;
            }
            .d-rotate .container {
                position: absolute;
                left: 50%;
                top:50%;
                width:128px;
                height:100px;
                -webkit-transition: -webkit-transform 1s;
                -moz-transition: -moz-transform 1s;
                transition: transform 1s;
    
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
           .d-rotate .container img {
                position: absolute;
                bottom: 0;
                width:128px;
                box-shadow: 0 1px 3px rgba(0,0,0,.5);
                -webkit-transition: opacity 1s, -webkit-transform 1s;
                -moz-transition: opacity 1s, -moz-transform 1s;
                transition: opacity 1s, transform 1s;
            }
           .d-rotate img:nth-child(1) { transform: rotateY(   0deg ); }
           .d-rotate img:nth-child(2) { transform: rotateY(  40deg ); }
           .d-rotate img:nth-child(3) { transform: rotateY(  80deg ); }
           .d-rotate img:nth-child(4) { transform: rotateY( 120deg ); }
           .d-rotate img:nth-child(5) { transform: rotateY( 160deg ); }
           .d-rotate img:nth-child(6) { transform: rotateY( 200deg ); }
           .d-rotate img:nth-child(7) { transform: rotateY( 240deg ); }
           .d-rotate img:nth-child(8) { transform: rotateY( 280deg ); }
           .d-rotate img:nth-child(9) { transform: rotateY( 320deg ); }

JS代碼以下：

(function(){
            // css transform 變換
            var transform = function(element, value, key) {
                key = key || "Transform";
                ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
                    element.style[prefix + key] = value;    
                }); 
                return element;
            };
            var $ = function(selector) {
                return document.querySelector(selector);
            };
            // 獲取元素
            var eleStage = $("#stage"),
                container = $("#container");

            var indexPiece = 0,
                htmlPic = '', 
                arrayPic = [1, 2, 3, 4, 5, 6, 7, 8, 9],
                rotate = 360 / arrayPic.length;

            arrayPic.forEach(function(i) {
                htmlPic = htmlPic + '<img id="img'+ i +'" src="./'+ i +'.jpg"/>';   
            });
            container.innerHTML = htmlPic;

            
            var transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);

            //  添加事件監聽器
            container.addEventListener("click", function() {
                transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)");  
            });
            
            arrayPic.forEach(function(i, j) {
                transform($("#img" + i), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ+15) +"px)");   
            });
            
        })();

博客園目前不能提交js代碼

相關標籤/搜索

每日一句

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