<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 ---------->
<div class="wrapper">
<div class="floater">
<div class="text">tested</div>
<div class="text">EasY</div>
</div>
</div>
@import "https://fonts.googleapis.com/css?family=Megrim";
.wrapper {
background: -webkit-linear-gradient(45deg, #d6306d, #fff581);
background: linear-gradient(45deg, #d6306d, #fff581);
width: 100%;
height: 100vh;
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;
z-index: -100;
-webkit-perspective: 500px;
perspective: 500px;
box-sizing: border-box;
border: 14px solid white;
}
.floater {
height: 300px;
width: 300px;
background: white;
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;
border-radius: 10px;
box-shadow: 0px 13px 30px -10px rgba(0, 0, 0, 0.8);
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
margin: 10px;
-webkit-animation: breathe 3s infinite;
animation: breathe 3s infinite;
-webkit-animation-timing-function: easeOutBack;
animation-timing-function: easeOutBack;
color: #d6306d;
font-size: 3rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.floater .text {
display: block;
font-family: Megrim, cursive;
font-size: 4rem;
padding-top: .8rem;
border-top: 2px solid #d6306d;
}
.floater .text:last-child {
font-size: 5rem;
margin-top: -.8rem;
padding-bottom: 1rem;
border-top: none;
border-bottom: 2px solid #d6306d;
}
.floater:hover {
box-shadow: 0px 60px 30px -30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.floater.right:hover {
-webkit-transform: rotate3d(-30, 0, -10, 5deg) translate3d(10px, -10px, 20px);
transform: rotate3d(-30, 0, -10, 5deg) translate3d(10px, -10px, 20px);
}
.floater.left:hover {
-webkit-transform: rotate3d(30, 0, 10, 5deg) translate3d(-10px, -10px, 20px);
transform: rotate3d(30, 0, 10, 5deg) translate3d(-10px, -10px, 20px);
}
@-webkit-keyframes breathe {
0% {
box-shadow: 0px 13px 30px -10px rgba(0, 0, 0, 0.8);
-webkit-transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
opacity: .4;
}
50% {
box-shadow: 0px 60px 30px -30px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate3d(-30, 0, -10, 2deg) translate3d(2px, -2px, 30px);
transform: rotate3d(-30, 0, -10, 2deg) translate3d(2px, -2px, 30px);
opacity: 1;
}
100% {
box-shadow: 0px 13px 30px -10px rgba(0, 0, 0, 0.8);
-webkit-transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
opacity: .4;
}
}
@keyframes breathe {
0% {
box-shadow: 0px 13px 30px -10px rgba(0, 0, 0, 0.8);
-webkit-transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
opacity: .4;
}
50% {
box-shadow: 0px 60px 30px -30px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate3d(-30, 0, -10, 2deg) translate3d(2px, -2px, 30px);
transform: rotate3d(-30, 0, -10, 2deg) translate3d(2px, -2px, 30px);
opacity: 1;
}
100% {
box-shadow: 0px 13px 30px -10px rgba(0, 0, 0, 0.8);
-webkit-transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
transform: rotate3d(0, 0, 0, 5deg) translate3d(0, 0, 0);
opacity: .4;
}
}
