Hello all,

Below is an example, how to create 3D mockup to create this you should know about css Transfrom and about pseudo class.

CSS:-

div{height:240px;width: 160px;background: #ccc;  position: relative;
      top:40px;padding:5px;box-sizing:border-box;
   -webkit-transform: rotate(-35deg) skew(20deg, 5deg);
  -moz-transform: rotate(-35deg) skew(20deg, 5deg);
  -ms-transform: rotate(-35deg) skew(20deg, 5deg);
  -o-transform: rotate(-35deg) skew(20deg, 5deg);
  transform: rotate(-35deg) skew(20deg, 5deg);
  -webkit-box-shadow:-0.5em 0.5em 0 #e1e1e1;
  -moz-box-shadow: -0.5em 0.5em 0 #e1e1e1;
  box-shadow: -0.5em 0.5em 0 #e1e1e1;
  -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
  -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
  -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
  transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;

  }
    div:before{  content: "";
  background: #181818 none repeat scroll 0 0;
    bottom: -5.2em;
    content: "";
    height: 160px;
    left: 4.5em;
    position: absolute;
    width: 0.5em;
      transform: rotate(90deg) skew(0deg, 45deg);
      -webkit-transform: rotate(90deg) skew(0deg, 45deg);
      -moz-transform: rotate(90deg) skew(0deg, 45deg);
      -ms-transform: rotate(90deg) skew(0deg, 45deg);
      -o-transform: rotate(90deg) skew(0deg, 45deg);}


  div:after {
  content: "";
  position: absolute;
  height: 15em;
  background: #121212;
  width: 0.5em;
  top: 0.215em;
  left: -0.45em;
  -webkit-transform: skewY(-45deg);
  -moz-transform: skewY(-45deg);
  -ms-transform: skewY(-45deg);
  -o-transform: skewY(-45deg);
  transform: skewY(-45deg);
}

HTML:-

 <div>
  <img src="00q.jpg"> //image path
</div>

Output:-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation