Skip to content

Instantly share code, notes, and snippets.

@satansdeer
Created Jul 22, 2018
Embed
What would you like to do?
.panel {
border-radius: 8px;
margin: 0 auto;
width: 320px;
height: 400px;
perspective: 600px;
position: relative;
}
.panel .panel-front {
backface-visibility: hidden;
border-radius: 8px;
box-shadow: 0 1px 8px rgba(0,0,0,0.4);
height: 100%;
left: 0;
top: 0;
transform-style: preserve-3d;
transform: rotateX(0) rotateY(0);
transition: all .4s ease-in-out;
width: 100%;
}
.panel.flip .panel-front {
transform: rotateY(179deg);
}
.panel .panel-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotateY(-179deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
}
.panel.flip .panel-back {
transform: rotateX(0) rotateY(0);
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment