Html CSS3图像旋转覆盖'；这是我的课文

当我将鼠标悬停在背景图像上时，我试图使其旋转。但同时我希望图片顶部的一些链接文本不会旋转

我让它半工作，但当图像旋转时，文本隐藏在它后面。有时你会将鼠标悬停在链接上，图像不会旋转。有没有办法做到这一点

JS小提琴：

---

开发人员站点：

我理解您为什么这样设置代码，但是

transform

有时会产生一些有趣的意外效果。在你的例子中，它以某种方式影响了z-指数，我不确定如何修复它

话虽如此，我还是这样做的，这对我来说更简单。它包括将文本放在旋转元素内，但同时以相反方向旋转文本以保持其直立

/* 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;
}

/*更新的HTML*/
/*CSS*/
分区按钮{
宽度：130px；
高度：130像素；
位置：相对位置；
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
过渡时间：0.5s；
浮动：左；
右边距：20px；
溢出：隐藏；
背景：url（'wp-content/themes/briggs/images/btn_contact.png'）；
}
div.按钮：悬停{
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-o变换：旋转（360度）；
}
分区按钮a{
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
过渡时间：0.5s；
颜色：#CFCAB4；
字体大小：24px；
线高：26px；
文本对齐：居中；
文本阴影：1px 1px#333333；
宽度：100%；高度：80%；
文本转换：大写；
位置：绝对位置；
顶部：50%；利润顶部：-40%；
左侧：50%；边缘左侧：-50%；
}
分区按钮：悬停a{
颜色：#fff；
-webkit变换：旋转（-360度）；
-moz变换：旋转（-360度）；
-o变换：旋转（-360度）；
}
分区按钮a跨度{
边框底部：1px实心#CFCAB4；
显示：内联块；
字体大小：12px；
线高：正常；
边缘底部：7px；
文本阴影：无；
}

---

如果您对我的方法有任何疑问，请告诉我

对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;
}

在上面的回答中，我忘记了后面的未经准备的转换

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

此外，由于某些原因，firefox和IE的设计出现了突破；span的字体需要设置得更高一些：

---

我知道一定有另一种方法，我只是没有想到。这很有效！我只是稍微加快了旋转速度，这样悬停时的颜色变化就不会那么缓慢了。非常感谢！如果需要，您实际上可以以比圆旋转更快的速度更改颜色（如中所示）。它将使用

转换：transform.5s，color.2s谢谢vals，这非常有效！出于某种原因，我不得不将div.button:after z-index更改为1，将div.button a z-index更改为2。但在那之后，它对我起了作用。有没有办法让它在狩猎、歌剧和IE中发挥作用？对我来说，它在那些浏览器中似乎不起作用。我已经编辑了我的答案，现在我认为它可以工作了。。