html - 我想将边界线旋转 45 度，同时将 img 固定在 css 中

Question

当您将鼠标悬停在 img 上时，我试图将边界线旋转 45 度，同时保持 img 固定。

有什么想法可以用 css 实现吗？

截至目前，我的边界线和我的 img 同时旋转。

HTML

<div id="button" class="rotate">
        <div id="button_box_frame" class="no_rotate">
            <a><img src="pics/show_window1.jpg" class="no_rotate"></a>
        </div>
</div>    

CSS

#button{
    margin-left:200px;
    margin-top:200px;   
    border:3px solid;
    overflow:hidden;
    height:200px;
    width:200px;
}

#button_box_frame img{
}

#button img{
}

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }  

.rotate:hover  
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

Answer 1

您可以通过添加负值 (-webkit-transform:rotate(-45deg);) 来抵消图像的旋转，这会将图像朝另一个方向旋转。这将在容器旋转时将图像保持在原位。请注意，您还必须将转换属性添加到图像，而不仅仅是 .rotate

#button{
    margin-left:200px;
    border:3px solid;
    overflow:hidden;
    height:200px;
    width:200px;
}

#button_box_frame img{
}

#button img{
}
.rotate img,
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }  

.rotate:hover  
{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

.rotate:hover img 
{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

<div id="button" class="rotate">
        <div id="button_box_frame" class="no_rotate">
            <a><img src="http://placehold.it/200x200" class="no_rotate"></a>
        </div>
</div>