base/app/assets/stylesheets/social_stream/base/logo/_logo-out.css
.logo-header-out .cube {
position:relative;
left: -38px;
z-index: 2;
float: left;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
.logo-header-out .cube:hover {
-webkit-animation: float 2s infinite ease-in-out;
-moz-animation: float 2s infinite ease-in-out;
-o-animation: float 2s infinite ease-in-out;
animation: float 2s infinite ease-in-out;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
@-webkit-keyframes float {
0% {
-webkit-transform: translate(-3px, 6px);
}
50% {
-webkit-transform: translate(-3px, 3px);
}
100% {
-webkit-transform: translate(-3px, 6px);
}
}
.logo-header-out .face {
position: absolute;
width: 30px;
height: 30px;
background-color: #ffffff;
border: 3px solid #888;
border-radius: 3px;
}
.logo-header-out .top-plane {
margin-top: -4px;
margin-left: 68px;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.logo-header-out .top-plane-shape{
background: #049cdb;
border: 4px solid #049cdb;
border-radius: 3px;
margin-top: -10px;
width: 28px;
height: 28px;
}
.logo-header-out .left-plane {
margin-top: 23px;
margin-left: 53px;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.logo-header-out .left-plane-shape{
background: #049cdb;
border: 4px solid #049cdb;
margin-left: 48px;
border-radius: 3px;
margin-top: 26px;
width: 28px;
height: 28px;
}
.logo-header-out .demoright {
margin-top: 24px;
margin-left: 83px;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}
.logo-header-out .shadow{
z-index: 1;
width: 12px;
height: 9px;
position: relative;
float: left;
margin-top: 79px;
margin-left: 14px;
box-shadow: -5px -22px 11px 10px rgba(50, 50, 50, .5);
-webkit-box-shadow: -5px -22px 11px 10px rgba(50, 50, 50, .5);
-webkit-transform: rotate(25deg) skew(-30deg, 10deg);
-moz-transform: rotate(25deg) skew(-30deg, 10deg)
}