前端练习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 ;

  }

}