css3特效第一篇--旋轉的背景&翻書效果

1、html遮蓋層與css3的旋轉動畫

 >效果圖（加載可能會慢一點兒，請稍等...）：

>實現思路：在一個大的div中裝入一個底層img和頂層的div（裏面的內容按照以上圖片呈現的樣式佈局），給底層圖片設置樣式讓其成現出圓形圖片的樣式，經過絕對定位覆蓋層的位置。給外層div添加鼠標懸浮的事件，當鼠標懸浮的時候讓覆蓋層的透明度改變，顯示出底層的圖片，同時讓底層圖片執行旋轉動畫。具體實現見如下代碼。

>html代碼：

 <div class="instruction">
    <a href="#">
      <img class="bgImg" src="images/shop3.jpg"> <!-- 底層圖片 -->
      <div class="cover"><!-- 頂層 -->
      　　<img src="images/icon4.png"> <!-- 頂層圖標 -->
      　　<h3>輕奢國際範兒</h3> <!-- 頂層標題 -->
     　　 <div>7大國際品牌聯盟，<br>與英國斯林百蘭牀墊、新加坡HTL沙發等國際知名品牌深度聯盟，
　　　　　　　　　　沙發、牀墊可定製</div> <!-- 頂層內容 -->
     </div>
    </a>
 </div>

 >css代碼

/*整個div  instruction 的樣式 */
.instruction {
    width: 256px;
    height: 256px;
    text-align: center;
    position: relative;
}
/*底層樣式 */
.instruction  .bgImg{
    width: 232px;
    border: 8px solid #FFF;
    border-radius: 50%;
    margin-top: 8px;
    opacity: 0;
    transition: all .3s linear;
}

/*覆蓋層（頂層）的樣式 */
.instruction .cover{
    width: 232px;
    height: 232px;
    border-radius: 50%;
    margin-top: 16px;
    margin-left: 12px;
    position: absolute; /*絕對定位*/
    top:0;
    left: 0;
    opacity: 1;
    transition: all .3s linear;
    
}
/*覆蓋層（頂層）img的樣式 */
.instruction .cover img{
    width: 42px;
    height: 42px;
    margin-top: 20px;
}
/*覆蓋層（頂層）標題的樣式 */
.instruction .cover h3{
    margin-top: 20px;
    color: #333333;
    transition: all .3s linear;
}

/*覆蓋層（頂層）內容div的樣式 */
.instruction .cover div{
    width: 220px;
    margin-top: 20px;
    margin-left: 12px;
    font-size: 14px;
    text-align: center;
    transition: all .3s linear;
    
}
/*div instruction 的鼠標浮動事件處理 */
.instruction:hover .cover{
    opacity: 0.5;
    background: #000;
    transition: all .3s linear;
}

.instruction:hover div{
    color: white;
    transition: all .3s linear;
}

.instruction:hover h3{
    color: white;
    transition: all .3s linear;
}

.instruction  li:hover .bgImg{
    opacity: 1;
    transition: all .3s linear;
    animation: img_rotate 20s linear;/*頂層圖片所執行的動畫，動畫時長，動畫執行效果 */
}

/*順時針選擇動畫*/
@keyframes img_rotate{
    from{transform: rotateZ(0deg)}
    from{transform: rotateZ(-360deg)}
}

* @keyframes 具體的使用和定義詳見：http://www.w3school.com.cn/css3/css3_animation.asp。

 

2、翻書效果的實現

>效果圖（加載可能會慢一點兒，請稍等...）：

>實現思路：按照上一個例子的思路，佈局好底層與覆蓋層，而後給覆蓋層添加Y軸的偏移角度並將其透明度置爲0（全透明）。給最外層添加hover事件，事件觸發的時候讓覆蓋層

的透明度和偏移角度發生變化。就能夠實現翻書的效果。

>html代碼：

<div class="show">
    <a href="#">
        <img src="images/book2.jpg" ><!-- 底層圖片 -->
        <p></p>
        <h3>服務特別好</h3>
        <div class="cover"><!-- 覆蓋層 -->
            <div class="content"><!-- 覆蓋層內容 -->
                <h4>服務特別好</h4>
                <a class="by">Posted by 宜和宜美</a><br>
                <a class="text" href="">整體來講此次購物仍是滿意的，首先我在網上下了訂單，而後，體驗店的人聯繫了我，溝通後，
　　　　　　　　　　　　　　　　　　　　　　　　他們來家裏進行實地測量，跟我一塊兒討論風格，給我量身定製。我選了歐式風格，過程仍是很順利的，最後就是到貨安裝，
　　　　　　　　　　　　　　　　　　　　　　　　師傅服務好，專業性也很強，安裝櫥櫃的時候都比較當心，防止磕碰，安裝衣櫃的時候也墊了地毯，整體來講仍是滿意的。</a>
                <a href="" class="complete">查看詳情
                </a>
        </div>
    </a>
</div>

>css代碼

.show  {
        width: 28%;
        border: 2px solid #EEEEEE;
        text-align: center;
        position: relative;
        perspective:1000px; /*設置元素被查看位置的視圖*/

    }

    .show img{
        width: 100%;
    }

    .show p{
        display: inline-block;
        width: 28px;
        height: 5px;
        margin-top: 20px;
    }

    .show h3{
        color: #333333;
        margin: 20px 0;
    }

    .show .cover{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: absolute;
        top:0;
        left:0;
        background: #EEEEEE;
        text-align: center;
        -webkit-transform: rotateY(-40deg) ;/*Y軸偏移負40度*/
        transform-origin: left; /*偏移的起始點，默認是中間，這裏改變成左邊*/
        opacity: 0;
        overflow: hidden;
        transition: all 1s linear;


    }

    .show h4{
        width: 100%;
        margin: 20px 0;
        color: #333;
    }

    .show .by{
        width: 80%;
        margin: 0 auto;
        display: block;
        font-style: 14px;
        color: #ccc;
        text-align: left;
    }

    .show .content{
        width: 100%;
        height: 92%;
        padding: 10% 0;
        margin: 0 auto;
        margin-top: 10%;
        background: #FFF;
        /*border: 2px solid #EEEEEE;*/
    }

    .show li:hover .cover{
        opacity: 1;
        transform: rotateY(0) ;
        transition: all 1s linear;
    }

    .show .text{
        width: 80%;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
    }

    .show .complete{
        font-size: 14px;
        color: #f1805f;
    }

*transform: rotateY(-40deg) 的具體使用詳見：http://www.w3school.com.cn/css3/css3_3dtransform.asp

*-webkit-transform: rotateX(120deg);	/* webkit：爲Safari 和 Chrome瀏覽器內核，給transform加上-webkit- 是爲了讓css3 transform 對每一種主流瀏覽器都能適配。 */
*-moz-transform: rotateX(120deg);	/* moz 火狐Firefox的內核 */