.logo-header-in .cube { position:relative; left: -38px; z-index: 2; float: left; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); } .logo-header-in .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(0px, 3px); } 50% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 3px); } } .logo-header-in .face { position: absolute; width: 14px; height: 14px; background-color: #ffffff; border: 2px solid #888; border-radius: 3px; } .logo-header-in .top-plane { margin-top: 1px; margin-left: 47px; -webkit-transform: rotate(-45deg) skew(15deg, 15deg); -moz-transform: rotate(-45deg) skew(15deg, 15deg); } .logo-header-in .top-plane-shape{ background: #049cdb; border: 4px solid #049cdb; border-radius: 3px; margin-top: -4px; width: 10px; height: 10px; } .logo-header-in .left-plane { margin-top: 14px; margin-left: 39px; -webkit-transform: rotate(15deg) skew(15deg, 15deg); -moz-transform: rotate(15deg) skew(15deg, 15deg); } .logo-header-in .left-plane-shape{ background: #049cdb; border: 4px solid #049cdb; margin-left: 35px; border-radius: 3px; margin-top: 16px; width: 10px; height: 10px; } .logo-header-in .demoright { margin-top: 14px; margin-left: 54px; -webkit-transform: rotate(-15deg) skew(-15deg, -15deg); -moz-transform: rotate(-15deg) skew(-15deg, -15deg); } .logo-header-in .shadow{ z-index: 1; width: 0; height: 0px; position: relative; float: left; margin-top: 54px; margin-left: -6px; 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) }