CSS3 наведите курсор мыши на изменение цвета фона

Question

Есть ли простой способ и уменьшить код для изменения цвета фона с эффектом катания? Благодаря

http://jsfiddle.net/Das8r/

<a href="#"><span data-title="Text Link">Text Link</span></a> 

    a{ 
     color: #03c; 
     display: inline-block; 
     overflow: hidden; 
     vertical-align: top; 

    } 

    a span{ 
     display: block; 
     position: relative; 
     padding: 0 2px; 
     -webkit-transition: all 400ms ease; 
     -moz-transition: all 400ms ease; 
     -o-transition: all 400ms ease; 
     -ms-transition: all 400ms ease; 
     transition: all 400ms ease; 
     -webkit-transform-origin: 50% 0%; 
     -moz-transform-origin: 50% 0%; 
     -o-transform-origin: 50% 0%; 
     -ms-transform-origin: 50% 0%; 
     transform-origin: 50% 0%; 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
     transform-style: preserve-3d; 
    } 

    a:hover span { 
     background: #03c; 
     -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
     -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
     -o-transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
     -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
     transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
    } 

    a span:after { 
     content: attr(data-title); 
     display: block; 
     position: absolute; 
     left: 0; 
     top: 0; 
     padding: 0 2px; 
     color: #fff; 
     background: #03c; 
     -webkit-transform-origin: 50% 0%; 
     -moz-transform-origin: 50% 0%; 
     -o-transform-origin: 50% 0%; 
     -ms-transform-origin: 50% 0%; 
     transform-origin: 50% 0%; 
     -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
     -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
     -o-transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
     -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
     transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
    } 

Answer 1

Вы можете сделать Минимизировать ваш по Сжимая в уменьшенную версию или вы должны использовать CSS препроцессор как SASS (Рекомендую).

CSS сам по себе может быть забавным, но таблицы стилей становятся все более крупными, сложными и сложными в обслуживании. Здесь может помочь препроцессор. Sass позволяет использовать функции, которые не существуют в CSS, но как переменные, вложенность, миксины, наследование и другие отличные лакомства, которые заставляют писать CSS еще раз.