网页|3D正方体照片效果

</div>

     <input type="radio" checked id="radio-front" name="select-face"/>   

     <input type="radio" id="radio-left" name="select-face"/>

     <input type="radio" id="radio-right" name="select-face"/>

     <input type="radio" id="radio-top" name="select-face"/>

     <input type="radio" id="radio-bottom" name="select-face"/>

     <input type="radio" id="radio-back" name="select-face"/>

<div></div>

<div>

     <div>

       <div></div>

       <div class="_3dface _3dface--top"></div>

       <div class="_3dface _3dface--bottom"></div>

       <div class="_3dface _3dface--left"></div>

       <div class="_3dface _3dface--right"></div>

       <div class="_3dface _3dface--back"></div>

     </div>

</div>

body {

  color:  #333;

  padding:  20px;

  text-align:  center;

  font-family:  Arial;

}

.separator {

  margin-top:  40px;

}

.twitter {

  color:  #FFF;

  text-decoration:  none;

  border-radius:  4px;

  background:  #00ACED;

  display:  inline-block;

  padding:  10px 8px;

  margin-bottom:  15px;

  font-weight:  bold;

}

.space3d {

  perspective:  1000px;

  width:  250px;

  height:  250px;

  text-align:  center;

  display:  inline-block;

}

._3dbox {

  display:  inline-block;

  transition:  all 0.85s;

  text-align:  center;

  position:  relative;

  width:  100%;

  height:  100%;

  transform-style:  preserve-3d;

  transform:  rotateX(-15deg) rotateY(15deg);

}

._3dface {

  overflow:  hidden;

  position:  absolute;

  border:  1px solid #888;

  background:  #FFF;

  box-shadow:  inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);

  color:  #333;

  line-height:  250px;

  opacity:  0.8;

}

._3dface--front {

  width:  250px;

  height:  250px;

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

}

._3dface--top {

  width:  250px;

  height:  250px;

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

}

._3dface--bottom {

  width:  250px;

  height:  250px;

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

}

._3dface--left {

  width:  250px;

  height:  250px;

  left:  50%;

  margin-left:  -125px;

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

}

._3dface--right {

  width:  250px;

  height:  250px;

  left:  50%;

  margin-left:  -125px;

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

}

._3dface--back {

  width:  250px;

  height:  250px;

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

}

#radio-left:checked ~ .space3d ._3dbox {

  transform:  rotateY(90deg);

}

#radio-right:checked ~ .space3d ._3dbox {

  transform:  rotateY(-90deg);

}

#radio-bottom:checked ~ .space3d ._3dbox {

  transform:  rotateX(90deg);

}

#radio-top:checked ~ .space3d ._3dbox {

  transform:  rotateX(-90deg);

}

#radio-back:checked ~ .space3d ._3dbox {

  transform:  rotateY(180deg);

}

._3dface--front {

  background:  url(img/背景图片/1111111.png);

  background-size:  100%;

}

._3dface--left {

  background:  url(img/背景图片/90c2a7d1d995d6c37114d0bf61e1533a.jpg);

  background-size:  auto 100%;

}

._3dface--right {

  background:  url(img/背景图片/b9a5cbdce3c2b1a72470685a2106f98e.jpg);

  background-size:  auto 100%;

}

._3dface--top {

  background:  url(img/背景图片/download.jpg);

  background-size:  auto 100%;

}

._3dface--bottom {

  background:  url(img/背景图片/u=25449582,2238308793&fm=15&gp=0.jpg);

  background-size:  auto 100%;

}

._3dface--back {

  background:  url(img/背景图片/u=2984323656,369738739&fm=26&gp=0.jpg);

  background-size:  auto 100%;

}