CSS3 Изображение повернуть наложение над моим текстом

Question

Я пытаюсь получить фоновое изображение, чтобы повернуть, когда я навис над ним. Но в то же время я хочу, чтобы какой-то текст ссылки поверх изображения НЕ вращался.

У меня есть полурабочее, но когда изображение вращается, текст скрывается за ним. и иногда вы наводите курсор на ссылку, и изображение не вращается. Есть ли способ сделать это?

JS Fiddle: http://bit.ly/1b9bpiJ

Dev Сайт: http://briggs.honeycombsites.com/

Answer 1

Небольшая модификация отличного ответа Zeaklous.

Чтобы избежать встречного вращения текста, не поворачивайте базовый div. Поместите фон в псевдоэлемент и поверните его.

div.button { 
    width:130px; 
    height:130px; 
    position:relative; 
    float: left; 
    margin-right: 20px; 
    overflow:hidden; 
} 
div.button:after { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
    background: url('http://briggs.honeycombsites.com//wp-content/themes/briggs/images/btn_contact.png'); 
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
    z-index: -1; 
} 
.button:hover:after { 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
} 
div.button a { 
    color: #CFCAB4; 
    font-size: 24px; 
    line-height: 26px; 
    text-align: center; 
    text-shadow: 1px 1px 1px #333333; 
    width: 100%; height:80%; 
    text-transform: uppercase; 
    position:absolute; 
    top:50%; margin-top:-40%; 
    left:50%; margin-left:-50%; 
} 
div.button:hover a { 
    color: #fff; 
} 
div.button a span { 
    border-bottom: 1px solid #CFCAB4; 
    display: inline-block; 
    font-size: 12px; 
    line-height: normal; 
    margin-bottom: 7px; 
    text-shadow: none; 
} 

updated demo

В ответе выше, я забыла unprefied превратить в загробной

.button:hover:after { 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 

Кроме того, по какой-то причине, дизайн перерывы в Firefox и IE; шрифт пролете должен быть установлен немного выше:

edited demo

Answer 2

Я понимаю, почему вы настроили свой код таким образом, но transform имеет некоторые интересные непреднамеренные эффекты в разы. В вашем случае это как-то влияет на z-index, и я точно не знаю, как это исправить.

С учетом сказанного ниже я сделаю это, что проще для меня. Она включает в себя ввод текста внутри вращающегося элемента, но вращая текст в противоположном направлении в то же самое время для того, чтобы держать его в вертикальном положении

/* Updated HTML */ 
<div class="button"> 
    <a href="#"><span>Contact Us</span>1.800 444.1515</a> 
</div> 

/* CSS */ 
div.button { 
    width:130px; 
    height:130px; 
    position:relative; 
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
    float: left; 
    margin-right: 20px; 
    overflow:hidden; 
    background: url('wp-content/themes/briggs/images/btn_contact.png'); 
} 
div.button:hover { 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
} 
div.button a { 
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
    color: #CFCAB4; 
    font-size: 24px; 
    line-height: 26px; 
    text-align: center; 
    text-shadow: 1px 1px 1px #333333; 
    width: 100%; height:80%; 
    text-transform: uppercase; 
    position:absolute; 
    top:50%; margin-top:-40%; 
    left:50%; margin-left:-50%; 
} 
div.button:hover a { 
    color: #fff; 
    -webkit-transform:rotate(-360deg); 
    -moz-transform:rotate(-360deg); 
    -o-transform:rotate(-360deg);  
} 
div.button a span { 
    border-bottom: 1px solid #CFCAB4; 
    display: inline-block; 
    font-size: 12px; 
    line-height: normal; 
    margin-bottom: 7px; 
    text-shadow: none; 
} 

Demo here

Позвольте мне знать, если у вас есть какие-либо вопросы по поводу моего метод