.wrap {
transform: rotate(45deg) translate3d(0, 0, 0);
display: inline-block;
transition: transform 300ms ease-out;
width: 100px;
}
.wrap:hover {
transition: transform 500ms ease-out;
transform: rotate(45deg) translate3d(10px, 10px, 0);
}
.wrap:nth-child(even) {
width: 40px;
transform: rotate(225deg) translate3d(30px, 120px, 0);
}
.wrap:nth-child(even) .crop img {
transform: skew(-20deg, -20deg) rotate(-225deg);
}
.wrap:nth-child(even):hover {
transform: rotate(225deg)
translate3d(40px, 130px, 0);
}
.crop {
position: relative;
width: 160px;
height: 160px;
margin: 0;
display: block;
overflow: hidden;
transform: skew(20deg, 20deg)
translate3d(0, 0, 0);
}
.crop img {
width: 160px;
height: 160px;
position: absolute;
left: -50%;
margin-top: 36px;
margin-left: 36px;
top: -50%;transform: skew(-20deg, -20deg)
rotate(-45deg);
opacity: 0.7;
transition: opacity 300ms ease-in-out;
}
.crop img:hover {
opacity: 1;
}
