3D 图片折叠

<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body { 
  min-height:600px;
  background: linear-gradient( hsl(200,51%,40%), #E0D7A3);
}
.container{
  width:300px;
  height:380px;
  margin:50px auto;
  
  perspective: 1000px;
}
.img{
  width:100%;
  height:100%;
  background: url("http://gx.zptc.cn/whqet/img/girl.jpg");
  background-size:100%;
  position:relative;
  
  transform-style: preserve-3d;
  transform-origin: center bottom;
	transition:all 1s;
}
.img:before{
  content:attr(data-text);
  width:100%;
  height:40px;
  position:absolute;
  top:100%;
  left:0;
  background: url("http://gx.zptc.cn/whqet/img/girl.jpg") left bottom;
  background-size:100%;
  
  font-size: 1.6vw;
  font-family: Montserrat, Arial, sans-serif;
  color:#fff;
  text-shadow:1px 1px 3px #000;
  text-align:center;
  line-height:40px;
  
  transform-origin: center top;
	transform-style: preserve-3d;
	transition:all 1s transform;
  transform:rotateX(-80deg);
}
.container:hover .img{
  transform: rotateX(75deg) translateZ(50px);
}

.img:after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
	box-shadow: 0 0 100px 50px rgba(0, 0, 0, .1), inset 0 0 250px 250px rgba(0, 0, 0, .1);
	transition:all  1s;
  perspective: 1000px;
	transform-style: preserve-3d;
  transform-origin: center bottom;
	transform: rotateX(90deg) translateZ(-80px) scale(0.75);
	
}
.container:hover .img:after{
  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
	transform: rotateX(-5deg) translateZ(-80px) scale(1);
}
</style>

<div class="container">
  <div class="img" data-text="JavaScript Demo"></div>
</div>