Только вращение фона

Рейтинг: 1Ответов: 1Опубликовано: 03.12.2014

Всем привет, имеется вот такой простой код: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .turn {
   background: url(images/images.jpg);
   width: 300px;
    height: 300px;
    border:1px solid black;
   }

   .turn:hover {
    transform: rotate(360deg);
    transition: transform 1s ease 0s;
    width: 300px;
    height: 300px;
    background: url(images/images.jpg);
    border:1px solid black;}
    .test {
    position: relative;
    top: 140px;
    left: 120px;
    }
  </style>
 </head>
 <body>
  <div class="turn"><a class="test" href="#">HTML5</a></div>
 </body>
</html>

И естественно т.к. тег "a" вложен в "div", он вращается вместе с ним. Так собственно в чём загвоздка, как можно реализовать, данный код, что бы вращался только "div" остовляя "a" статичным?

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Может так http://jsfiddle.net/t3j0gyf6/

HTML

<div class="turn">
    <img src="http://greenrobot-apps.net/uploads/posts/Asterix-Total-Retaliation.jpg" alt="" />
    <a class="test" href="#">HTML5</a>
</div>

JavaScript

*{    
    padding: 0;
    margin: 0;
}

.turn{        
    position: relative;
    width: 300px; 
    height: 300px;
}
.turn img{
    width: 100%; 
    height: 100%;    
}
.turn:hover img{       
    background: #000;     
    transform: rotate(360deg);
    transition: all 0.5s ease-in-out;
}
.turn .test{       
    display: inline-block;
    position: absolute; top: 140px; left: 100px;   
    z-index: 1;
    font-size: 25px;
    color: #000;
    background: #ddd;
    padding: 5px 10px;
}
.turn:hover .test{    
    background: #000;
    color: #fff;
}