CSS
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card, .card.activeRight, .card.activeTopRight, .card.activeTopLeft, .card.activeBottomLeft, .card.activeBottomRight, .card.activeLeft, .card.activeBottom, .card.activeTop {
-webkit-transition: .3s linear;
transition: .3s linear;
}
html, body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #eee;
}
.card {
width: 300px;
height: 433.5px;
position: relative;
background-color: #fff;
background-image: url("https://s-media-cache-ak0.pinimg.com/564x/af/93/71/af9371a1a992b484f4397833db1250b0.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.card .top {
width: 100%;
height: 25%;
position: absolute;
top: 0;
left: 0;
}
.card .bottom {
width: 100%;
height: 25%;
position: absolute;
bottom: 0;
left: 0;
}
.card .left {
width: 25%;
height: 50%;
position: absolute;
top: 25%;
left: 0;
}
.card .right {
width: 50%;
height: 50%;
position: absolute;
top: 25%;
right: 0;
}
.card .topLeft {
width: 75px;
height: 25%;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}
.card .topRight {
width: 75px;
height: 25%;
position: absolute;
top: 0;
right: 0;
z-index: 9999;
}
.card .bottomLeft {
width: 75px;
height: 25%;
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
}
.card .bottomRight {
width: 75px;
height: 25%;
position: absolute;
bottom: 0;
right: 0;
z-index: 9999;
}
.card.activeRight {
box-shadow: -10px 0px 38px rgba(0, 0, 0, 0.6), 0 0px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(0deg) rotateY(10deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}
.card.activeTopRight {
box-shadow: -10px 5px 38px rgba(0, 0, 0, 0.6), 0 5px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}
.card.activeTopLeft {
box-shadow: 10px 5px 38px rgba(0, 0, 0, 0.6), 0 5px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}
.card.activeBottomLeft {
box-shadow: 10px -5px 38px rgba(0, 0, 0, 0.6), 10px -5px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}
.card.activeBottomRight {
box-shadow: -10px -5px 38px rgba(0, 0, 0, 0.6), -10px -5px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}
.card.activeLeft {
box-shadow: 10px 0px 38px rgba(0, 0, 0, 0.6), 0 0px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}
.card.activeBottom {
box-shadow: 0px -10px 38px rgba(0, 0, 0, 0.6), 0 -10px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}
.card.activeTop {
box-shadow: 0px 10px 38px rgba(0, 0, 0, 0.6), 0 10px 12px rgba(0, 0, 0, 0.4);
-webkit-transform: perspective(1000px) rotateX(10deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(1000px) rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}
