<body>
<div class="center">
<div class="card">
<div class="flippy">
<div class="front">
<div class="car"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1435559/car.svg" alt="car svg">
</div>
<div class="street">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
<div class="line line-4"></div>
<div class="line line-5"></div>
<div class="line line-6"></div>
</div>
</div>
<div class="back">
<div class="jet">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1435559/jet.svg">
</div>
<div class="sky">
<div class="line line-1"></div>
<div class="line line-2"></div>
<!-- <div class="line line-3"></div> -->
<div class="line line-4"></div>
<!-- <div class="line line-5"></div> -->
<div class="line line-6"></div>
<div class="missile">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1435559/missile.svg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #397187;
height: 400px;
width: 400px;
box-shadow: 3px 5px 20px 2px rgba(0,0,0,0.4);
font-family: 'Open Sans',sans-serif;
}
.card {
position: relative;
width: 250px;
height: 150px;
perspective: 800px;
// overflow: hidden;
&:hover {
.flippy {
transform: rotateX(-180deg) translate3d(0,0,0);
}
}
.flippy {
width: 100%;
height: 100%;
perspective: 1000px;
transform-style: preserve-3d;
transition: all 1s;
border-radius: 10px;
background: white;
box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.front {
transform: rotateX(0);
}
.back {
transform: rotateX(180deg);
}
}
.car {
width: 50%;
animation: drive .7s ease-in-out infinite;
transform-origin: bottom center;
@keyframes drive {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(0.97);
}
}
}
.street {
position: absolute;
bottom: -31%;
width: 200px;
height: 2px;
display: flex;
align-items: flex-end;
.line {
position: absolute;
bottom: 99px;
right: -25px;
height: 3px;
width: 25px;
border-radius: 50%;
background: #112;
animation: road-bg 1s linear infinite;
}
.line-2, .line-4 {
width:15px;
animation: road-bg 1.2s linear infinite;
}
.line-3 {
width:15px;
animation: road-bg 1.3s linear infinite;
}
.line-5, .line-6 {
width: 10px;
animation: road-bg 1.4s linear infinite;
}
}
.sky {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
.line {
position: absolute;
bottom: 80%;
right: -25px;
height: 3px;
width: 15px;
border-radius: 50%;
background: #112;
animation: air-bg 1s linear infinite;
}
.line-2 {
bottom: 15%;
width:15px;
animation: air-bg 1.2s linear infinite;
}
.line-3 {
bottom: 71%;
width:10px;
animation: air-bg 1.2s linear infinite;
}
.line-4 {
bottom: 25%;
width:12px;
animation: air-bg 1s linear infinite;
}
.line-5 {
bottom: 50%;
width: 10px;
animation: air-bg 1.4s linear infinite;
}
.line-6{
bottom: 35%;
width: 10px;
animation: air-bg 1.6s linear infinite;
}
}
.jet {
width: 50%;
animation: fly 2s linear infinite;
@keyframes fly {
0% {
transform: translate3d(-22px,12px,0);
}
10% {
transform: translate3d(-12px,8px,0);
}
50% {
transform: translate3d(-5px,20px,0);
}
75% {
transform: translate3d(-20px,-8px,0);
}
100% {
transform: translate3d(-22px,12px,0);
}
}
}
.missile {
position: absolute;
right: -30%;
top: 0;
width: 20%;
animation: miss 2s linear infinite;
@keyframes miss {
0%{
transform: translate3d(0,0,0);
}
100%{
transform: translate3d(-600px,0,0);
}
}
img {
width: 100%;
}
}
@keyframes road-bg {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(-200px,0,0);
}
}
@keyframes air-bg {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(-300px,0,0);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.