使用css3的transform制作apple的展示臺效果

2024-09-05 12:17:23

字體：大中小

來源：轉載

供稿：網友

使用css3的transform制作apple的展示臺效果，本實例初一看，幾張卡要有角度的偏轉，有這個屬性的就是transform，當移到那個上面的時候變的就是z-index。整個效果就完了。

<!DOCTYPE HTML><html lang="en-US"><head><title>使用css3的transform制作apple的展示臺效果</title></head><body>        <style type="text/css">        *{margin:0;padding:0px;}    body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}    .tips{width:600px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}        .bredcolor{color:#fff;}    #zhjall{width:760px;margin:0 auto;text-align:center;padding-top:10px;}      ul#zhjall_apples {margin-top:10px;text-align:center;}     ul#zhjall_apples li {        height:450px;width:130px;display:block;float:left;border:1px solid #666;padding:25px 10px;position:relative;margin-bottom:70px;        border-radius: 10px;        box-shadow: 2px 2px 10px #000;        -webkit-transition: all 0.5s ease-in-out;    }    #apple-1 {            background-color:blue;z-index:1;left:150px;top:40px;        -webkit-transform: rotate(-20deg);        -moz-transform: rotate(-20deg);    }        #apple-2 {            background-color:yellow;z-index:2;left:70px;top:10px;        -webkit-transform: rotate(-10deg);        -moz-transform: rotate(-10deg);    }        #apple-3 {background-color:#69732B;z-index:3;}    #apple-4 {z-index:2;right:70px;top:10px;            background-color:rgba(0, 103, 5, 1);        -webkit-transform: rotate(10deg);        -moz-transform: rotate(10deg);    }    #apple-5 {            background-color:red;z-index:1;right:150px;top:40px;        -webkit-transform: rotate(20deg);        -moz-transform: rotate(20deg);    }    ul#zhjall_apples li:hover {z-index:4;}    #apple-1:hover {-webkit-transform: scale(1.1) rotate(-18deg); }           #apple-2:hover {-webkit-transform: scale(1.1) rotate(-8deg); }       #apple-3:hover {-webkit-transform: scale(1.1) rotate(2deg); }      #apple-4:hover {-webkit-transform: scale(1.1) rotate(12deg); }    #apple-5:hover {-webkit-transform: scale(1.1) rotate(22deg); }        </style>        <section class="tips">          <p class="bredcolor">css3小技巧:</p>                  這個實例一看，就是要有角度的偏轉，有這個屬性的就是transform<br>        當移到那個上面的時候變的就是z-index。整個效果就完了。<br>          qq群:197326136        </section>        <section id="zhjall">            <ul id="zhjall_apples">                <li id="apple-1">                    <h3>Card 1</h3>            </li>            <li id="apple-2">                    <h3>Card 2</h3>            </li>            <li id="apple-3">                    <h3>Card 3</h3>            </li>            <li id="apple-4">                    <h3>Card 4</h3>                   </li>            <li id="apple-5">                    <h3>Card 5</h3>            </li>        </ul>    </section></body></html>

上一篇：用css3制作模塊變大的效果

下一篇：CSS3模仿新浪微博主頁文字滾動