Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Perspective mockup using CSS

    • 0
    • 2
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 183
    Comment on it

    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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: