图片翻转+文字翻转特效

![蒙娜丽莎](http://a1.att.hudong.com/75/68/05300000467416128543684500954.jpg)

Web Designer

Description

</div>
</div>

/*HTML*/
    div.box
        img[src="..."]
        div.over-layer
            h3
            p
/*CSS*/
.box{
  position:relative;
  perspective: 1000px;
  text-align:center;
}
.box img{
  width:200px;
  height:auto;
  opacity:1;
  transform:translateY(0) rotateX(0);
  transition: all 1s ease-in-out 0s;
}

.box:hover img{
  transform: translateY(-100%) rotateX(90deg);
  transform-origin: center bottom 0;
  opacity:0;
}

.box .over-layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform: translateY(100%) rotateX(-90deg);
    opacity:0;
  transform-origin:top center;
  transition: all 1s ease-in-out;
}
.box:hover .over-layer{
  transform: translateY(0) rotateX(0);
    opacity:1;
}

Author: Chen Yu

Link: https://ezcook.de/2016/06/17/e5-9b-be-e7-89-87-e7-bf-bb-e8-bd-ac-e6-96-87-e5-ad-97-e7-bf-bb-e8-bd-ac-e7-89-b9-e6-95-88/