3D Mobile Box - CSS

on





1.jpg
( Download )

HTML

<!doctype html>

<html>
 <head>
 <meta charset="utf-8">
 <title> css 3d</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div class="center">
 <div class="box">
 <img src="1.jpg">
 </div>
 </div>
 </body>
</html>

CSS

body{
margin:0;
 padding:0;
 background:rgba(153,93,255,0.5);
}
.center{
 position:absolute;
 top:240px;
 left:600px;
 transform: translate(-30%,-30%);
}
.box {
 position:relative;
 width:400px;
 height:200px;
 transform:perspective(500px) rotate(-40deg) skew(25deg);
 box-shadow:-90px 75px 20px rgba(0,255,0,.9);
 background: #fff url(1.jpg);
 background-size: 320px;
 background-repeat:no-repeat;
 background-position: 50% 50%;
 transition: 0.5s;
}
.box:hover{
 transform:perspective(500px) rotate(-40deg) skew(25deg) translate(50px,-50px) ;
    box-shadow:-200px 120px 10px rgba(0,0,255,.9);
}
.box:before{
content:'';
 width:90px;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 transform: skewY(-40deg) translate( -90px,-38px);
 background:#e8e7ec url(.jpg);
 background-size:40px;
 background-repeat:no-repeat;
 background-position:50% 50%;
}
.box:after{
content:'';
 width:100%;
 height:77px;
 position:absolute;
 bottom:0;
 left:0;
 transform: skew(-50deg) translate(45px,76px);
 background:#e8e7ec url(.jpg);
 background-size:90px;
 background-repeat:no-repeat;
 background-position:50% 50%;
}