CSS3 幻灯片

 
   
  1. http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. </span><span class="pln" style="color:#48484c;">无标题文档</span><span class="tag">
  3. id="css">
  4. body,ul,ol{margin:0;padding:0;}
  5. li{ list-style:none;}
  6. .wrap{width:800px;margin:100px auto 0;}
  7. #picList{width:800px;height:360px; -webkit-perspective:800px; }
  8. #picList li{width:25px;height:360px; position:relative; -webkit-transform-style:preserve-3d; -webkit-transform-origin:center center -180px;float:left;}
  9. #picList a{width:100%;height:100%; position:absolute;left:0;top:0;}
  10. #picList li a:nth-of-type(1){ background:url(img/1.JPG)no-repeat }
  11. #picList li a:nth-of-type(2){ background:url(img/2.JPG) no-repeat; top:-360px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg)}
  12. #picList li a:nth-of-type(3){ background:url(img/3.JPG)no-repeat; -webkit-transform:translateZ(-360px) rotateX(180deg);}
  13. #picList li a:nth-of-type(4){ background:url(img/4.JPG)no-repeat; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); top:360px;}
  14. #picList li span{ position:absolute;width:360px;height:360px;background:#333;}
  15. #picList li span:nth-of-type(1){ -webkit-transform-origin:left; -webkit-transform:rotateY(90deg);left:0;}
  16. #picList li span:nth-of-type(2){ -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);right:0;}
  17. #btns{float:right; padding:10px 0;}
  18. #btns li{width:40px;height:40px;background:#000;color:#fff; border-radius:50%; font:italic 30px/40px Arial;float:left;margin:0 5px; text-align:center; cursor:pointer;}
  19. #btns .active{ background:#f60;}
  20. class="wrap">
  21. id="picList">
  22. id="btns">
  23. class="active">1
  24. 2
  25. 3
  26. 4

  • 你可能感兴趣的:(CSS3)