css3特效第一篇--旋转的背景&翻书效果

 <div class="instruction">

    <a href="#">

      <img class="bgImg" src="data:images/shop3.jpg"> <!-- 底层图片 -->

      <div class="cover"><!-- 顶层 -->

      　　<img src="data:images/icon4.png"> <!-- 顶层图标 -->

      　　<h3>轻奢国际范儿</h3> <!-- 顶层标题 -->

     　　 <div>7大国际品牌联盟，<br>与英国斯林百兰床垫、新加坡HTL沙发等国际知名品牌深度联盟，
　　　　　　　　　　沙发、床垫可定制</div> <!-- 顶层内容 -->

     </div>

    </a>

 </div>

/*整个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:;

    transition: all .3s linear;

}

/*覆盖层（顶层）的样式 */

.instruction .cover{

    width: 232px;

    height: 232px;

    border-radius: 50%;

    margin-top: 16px;

    margin-left: 12px;

    position: absolute; /*绝对定位*/

    top:;

    left:;

    opacity:;

    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:;

    transition: all .3s linear;

    animation: img_rotate 20s linear;/*顶层图片所执行的动画，动画时长，动画执行效果 */

}

/*顺时针选择动画*/

@keyframes img_rotate{

    from{transform: rotateZ(0deg)}

    from{transform: rotateZ(-360deg)}

}

<div class="show">

    <a href="#">

        <img src="data: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>

.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:;

        left:;

        background: #EEEEEE;

        text-align: center;

        -webkit-transform: rotateY(-40deg) ;/*Y轴偏移负40度*/

        transform-origin: left; /*偏移的起始点，默认是中间，这里改变成左边*/

        opacity:;

        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:;

        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;

    }