CSS33D翻转相册

transform属性和transition过渡属性，结合jQuery代码实现翻转功能。

   1     DOCTYPE html  > 
   2     html   lang  ="en"  > 
   3     head  > 
   4         meta   charset  ="UTF-8"  > 
   5         title  > 3d翻转相册   title  > 
   6         script   src  ="jquery-3.0.0.min.js"  >  script  > 
   7         style  > 
   8           .container   { 
   9               position  :   relative  ; 
  10               width  :   560px  ; 
  11               height  :   380px  ; 
  12               margin  :   0 auto  ; 
  13           } 
  14           .items   { 
  15               height  :   100%  ; 
  16               margin  :   100px auto  ; 
  17               transform-style  :   preserve-3d  ; 
  18               /*  实现自动翻转效果，这里只设置翻转一次  */ 
  19               animation  :   autoMove 3s 1 linear  ; 
  20               /*  点击翻转  过渡效果  */ 
  21               transition  :   all 0.5s  ; 
  22           } 
  23           .item   { 
  24               width  :   100%  ; 
  25               height  :   100%  ; 
  26               position  :   absolute  ; 
  27               border  :   1px solid #c18  ;
　　　　　　　　　  

font-size: 50px; 

  28           } 
  29           /*  设置不同的bgc，方便区分  */ 
  30           .item:nth-child(1)   { 
  31               /*  background-image: url("images/01.jpg");  */ 
  32               background-color  :   #cc1188  ; 
  33           } 
  34           .item:nth-child(2)   { 
  35               /*  background-image: url("images/02.jpg");  */ 
  36               background-color  :   #0094ff  ; 
  37           } 
  38           .item:nth-child(3)   { 
  39               /*  background-image: url("images/03.jpg");  */ 
  40               background-color  :   #22ff22  ; 
  41           } 
  42           .item:nth-child(4)   { 
  43               /*  background-image: url("images/04.jpg");  */ 
  44               background-color  :   #666666  ; 
  45           } 
  46           /*  定义动画  */ 
  47           @keyframes autoMove   { 
  48               from {   } 
  49               to   { 
  50                   transform  :   rotateX(360deg)  ; 
  51               } 
  52           }
   53           /*  设置左右翻页箭头样式  */ 
  54           .left, .right   { 
  55               width  :   50px  ; 
  56               height  :   50px  ; 
  57               line-height  :   50px  ; 
  58               text-align  :   center  ; 
  59               color  :   white  ; 
  60               font-size  :   50px  ; 
  61               background-color  :   darkslategray  ; 
  62               opacity  :   .5  ; 
  63               position  :   absolute  ; 
  64               top  :   50%  ; 
  65               margin-top  :   -25px  ; 
  66               cursor  :   pointer  ; 
  67           } 
  68           .left   { 
  69               left  :   -25px  ; 
  70           } 
  71           .right   { 
  72               right  :   -25px  ; 
  73           } 
  74         style  > 
  75         script  > 
  76           $(  function   () {
   77               var   itemNum   =   $(  "  .items>.item  "  ).length;
   78               var   itemDeg   =   360   /   itemNum;
   79               $(  "  .items .item  "  ).each(  function   (index, element) {
   80                   $(element).css({
   81                       transform:   "  rotateX(  "   +   index   *   itemDeg   +   "  deg) translateZ(190px)  " 
  82                   });
   83               });
   84               var   count   =   0  ;  //  记录点击的次数，右击加1，左击减1 
  85               $(  "  .container .arrow .right  "  ).click(  function   () {
   86                   count  ++  ;
   87                   $(  "  .items  "  ).css({
   88                       transform:   "  rotateX(  "  +-  90  *  count  +  "  deg)  " 
  89                   });
   90  
  91               });
   92               $(  "  .container .arrow .left  "  ).click(  function   () {
   93                   count  --  ;
   94                   $(  "  .items  "  ).css({
   95                       transform:   "  rotateX(  "  +-  90  *  count  +  "  deg)  " 
  96                   });
   97               });
   98           });
   99         script  > 
 100     head  > 
 101     body  > 
 102         div   class  ="container"  > 
 103             div   class  ="items"  > 
 104                 div   class  ="item"  > 1   div  > 
 105                 div   class  ="item"  > 2   div  > 
 106                 div   class  ="item"  > 3   div  > 
 107                 div   class  ="item"  > 4   div  > 
 108             div  > 
 109             div   class  ="arrow"  > 
 110                 div   class  ="left"  >    > 
 111                 div   class  ="right"  > >   div  > 
 112             div  > 
 113         div  > 
 114     body  > 
 115     html  >  

查看更多关于CSS33D翻转相册的详细内容...