<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/asistapl/pen/VaQzYP?depth=everything&order=popularity&page=55&q=card&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">body {
height: 100vh;
text-align: center;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://images.unsplash.com/5/unsplash-bonus.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=da7d75bd50bc054b3cd44c46f9a01e0c) center/cover fixed;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://images.unsplash.com/5/unsplash-bonus.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=da7d75bd50bc054b3cd44c46f9a01e0c) center/cover fixed;
}
.c-phone {
max-width: 500px;
width: 80%;
margin: 20vh auto 0;
position: relative;
-webkit-perspective: 700px;
perspective: 700px;
}
.c-phone img {
-webkit-transition: 1.2s cubic-bezier(0.5, 0.25, 0, 1.6);
transition: 1.2s cubic-bezier(0.5, 0.25, 0, 1.6);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.c-phone__screen {
width: 100%;
-webkit-animation: animate-screen 1.2s cubic-bezier(0.5, 0.25, 0, 1.6);
animation: animate-screen 1.2s cubic-bezier(0.5, 0.25, 0, 1.6);
}
.c-phone__card {
width: 58%;
position: absolute;
top: 12.5%;
left: 21.5%;
-webkit-animation: animate-card 1.2s cubic-bezier(0.5, 0.25, 0, 1.6);
animation: animate-card 1.2s cubic-bezier(0.5, 0.25, 0, 1.6);
}
.c-phone:hover img {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.c-phone:hover .c-phone__screen {
-webkit-transform: scale(0.8) rotate(45deg) rotateY(-40deg);
transform: scale(0.8) rotate(45deg) rotateY(-40deg);
opacity: 0;
}
.c-phone:hover .c-phone__card {
-webkit-transform: scale(1.15) rotate(45deg) rotateY(-40deg);
transform: scale(1.15) rotate(45deg) rotateY(-40deg);
}
@-webkit-keyframes animate-screen {
from {
-webkit-transform: scale(0.8) rotate(45deg) rotateY(-40deg);
transform: scale(0.8) rotate(45deg) rotateY(-40deg);
opacity: 0;
}
}
@keyframes animate-screen {
from {
-webkit-transform: scale(0.8) rotate(45deg) rotateY(-40deg);
transform: scale(0.8) rotate(45deg) rotateY(-40deg);
opacity: 0;
}
}
@-webkit-keyframes animate-card {
from {
-webkit-transform: scale(1.15) rotate(45deg) rotateY(-40deg);
transform: scale(1.15) rotate(45deg) rotateY(-40deg);
}
}
@keyframes animate-card {
from {
-webkit-transform: scale(1.15) rotate(45deg) rotateY(-40deg);
transform: scale(1.15) rotate(45deg) rotateY(-40deg);
}
}
.link {
display: inline-block;
margin: 130px auto 10vh;
padding: 1em 2em;
font: bold 1em sans-serif;
text-decoration: none;
color: #bbb;
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.2);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.link:hover {
color: white;
background: rgba(255, 255, 255, 0.2);
border-color: transparent;
}
</style></head><body>
<div class="c-phone hide(max-sm)"><img class="c-phone__screen" src="http://exporia.pl/images/fsi/phone.png" alt="iPhone"/><img class="c-phone__card" src="http://exporia.pl/images/card/card.png" alt="Karta rabatowa Exporia"/></div><a class="link" href="https://codepen.io/asistapl" target="_blank">Check out my other animations</a>
</body></html>
