前端练习4-立方体翻转效果

html代码为：

< div  id =  "slideShow"  class  = "slides-wrapper" >

     < section  class  = "slide" >

       < img  src  = "1.jpg"  />

     </ section  >

     < section  class  = "slide" >

       < img  src  = "2.jpg"  />

     </ section  >

     < section  class  = "slide" >

       < img  src  = "3.jpg"  />

     </ section  >

   </ div  >

css代码为：

body  {

   font-size :  24px  ;

   font-family :  'Roboto Condensed',  sans-serif ;

   overflow :  hidden  ;

   min-height :  500px  ; /*高度最小值为500px*/

   min-width :  300px  ; /*宽度最小值为300px*/

 background :  url(http://subtlepatterns.com/patterns/diagmonds.png)  ; /*背景图片*/

   position :  absolute  ;

   width :  100%  ;

   height :  100%  ;

}

a  {

   color :  #666  ;

   text-decoration :  none  ;

   transition :  all  0.5s ;

}

/*当鼠标滑过链接时，改变链接的背景颜色*/

a:hover  {

   color :  #999  ;

}

/*当图片到达尽头时，链接消失*/

.hidden  {

  display :  none  ;

}

.slides-wrapper  {

   -webkit-transform-style :  preserve-3d ;

   -webkit-perspective :  700px ;

   -webkit-perspective-origin :  50%  100px ;

   -webkit-transform :  translateZ(0) ;

   transform-style :  preserve-3d  ;

   perspective :  700px  ;

   perspective-origin :  50%  100px ;

/*

prespective属性定义3D元素距视图的距离，以像素计。

用法： prespective：number|none

number     元素距离视图的距离，以像素计。

none       默认值；与0相同，不设置透视。

注：当元素定义prespective属性时，其子元素会获得透视元素，而不是元素本身。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。

用法：perspective-origin: x-axis y-axis;

x-axis   定义该视图在 x 轴上的位置。默认值：50%（left，center，right，length，%）  

y-axis     定义该视图在 x 轴上的位置。默认值：50%（left，center，right，length，%）  

*/

   transform :  translateZ(0)  ;

   position :  absolute  ;

   width :  40%  ;

   height :  40%  ;

   top :  25%  ;

   left :  30%  ;

   z-index :  2  ;

}

.slide  {

   width :  100%  ;

   min-height :  100%  ;

   max-height :  120%  ;

   line-height :  1.5  ;

   position :  absolute  ;

   opacity :  0  ;

   font-size :  1em  ;

   color :  #eee  ;

   left :  0  ;

   -webkit-transition :  0.7s  all  cubic-bezier(0.260,  0.860,  0.440,  0.985)  ;

   transition :  0.7s  all  cubic-bezier(0.260,  0.860,  0.440,  0.985) ;

   -webkit-transform :  translateZ(0) ;

   transform :  translateZ(0)  ;

   background :  rgba(0,0,0,0.5)  ;

   border-radius :  3px  ;

   box-shadow :  0  0  20px  10px  #000  ;

   box-sizing :  border-box  ;

   overflow :  hidden  ;

}

.slide.current    {

   opacity :  1  ;

   -webkit-transform :  translate3d(0,  0,  125px) ;

   transform :  translate3d(0,  0,  125px) ;

}

.slide.next  {

   opacity :  0  ;

   -webkit-transform :  rotateY(90deg)  translate3d(-20%,  0,  155px) ;

   -webkit-transform-origin :  top  left ;

   transform :  rotateY(90deg)  translate3d(0,  0,  125px) ;

   transform-origin :  top  left ;

   left :  80%  ;

}

.slide.prev  {

   -webkit-transform :  rotateY(-90deg)  translate3d(20%,  0,  155px) ;

   -webkit-transform-origin :  top  right ;

   transform :  rotateY(-90deg)  translate3d(0,  0,  125px) ;

   transform-origin :  top  right ;

   opacity :  0  ;

   left :  -80%  ;

}

.slide ul,  .slide ol  {

   margin :  1em  0 ;

}

.slide li  {

   list-style-position :  inside ;

}

.nav-button  {

   position :  fixed  ;

   z-index :  10  ;

   min-width :  150px  ;

   width :  5%  ;

   height :  100%  ;

   border :  none  ;

   background-color :  transparent  ;

   background-position :  center ;

   background-repeat :  no-repeat ;

   text-indent :  -99999px  ;

   cursor :  pointer  ;

}

.nav-button:focus  {

   outline :  none  ;

}

.nav-button:hover  {

   background-color :  rgba(0,  0,  0,  0.2) ;

}

.nav-button:active  {

   background-color :  rgba(20,  20,  20,  0.3) ;

}

/*左边箭头*/

.nav-button.prev  {

   background-image :  url(http://i.imgur.com/y6ZypnW.png?1?5201)  ;

   left :  0  ;

}

/*右边箭头*/

.nav-button.next  {

   background-image :  url(http://i.imgur.com/dH1KsfM.png?1)  ;

   right :  0  ;

}

@media  all  and (max-width: 1280px) {

   body  {

     font-size :  14px  ;

  }

   .nav-button  {

     background-size :  60%  ;

     min-width :  100px  ;

  }

}