html - 旋转图像中的图像

Question

我有两张图片:一张应该像边框，悬停时会旋转，另一张应该在旋转的第一张图片内。如何将第二张图片放在第一张图片内？这是我的代码和 jsfiddle...

<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;">              
    <img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png"  style="display:inline-block;"/>         
    <img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png"  style="display:inline-block;"/>          
</div>

我的CSS...

 .rotate{
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
} 

JSFIDDLE

Answer 1

我不得不使用几个嵌套元素来实现所有三个目标:

1. 旋转边框和信封图标重叠并对齐在一起。
2. 图像对水平居中。
3. 图像对大小是响应式的。

解释

div.image_wrap 元素是 div.container 的居中子元素，它为两个图像提供了一个容器。它的宽度是 div.container 的 100%，但不超过 42px(图片的宽度)。

元素 div.image_height_prop 给出了 div.image_wrap(因此 div.container)高度。由于里面的图像是绝对定位的(因此它们重叠)，它们没有高度并且不会撑开它们的容器。 div.image_height_prop 将 padding-top 设置为其父级宽度的 100%，本质上是一个响应式方形支柱。

图像绝对位于彼此之上，“边框”在 DOM 中位于最后，因此它将位于堆叠顺序的顶部(用于悬停)。

HTML

<div class="col-xs-4 container">
    <div class="image_wrap">
        <div class="image_height_prop">            
            <img class="icon" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
            <img class="rotate" src="http://s27.postimg.org/x4d8qxe73/square.png" />
        </div>
    </div>
</div>

CSS

div.container {
    text-align:center;
    background:black;
    margin-top:20px;
}
div.image_wrap {    
    display:inline-block;
    max-width:42px;
    width:100%;
}
div.image_height_prop {
    position:relative;    
    width:100%;
    padding-top:100%;
    height:0;
}
div.image_wrap img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

img.rotate {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
img.rotate:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Working Example

如@chiliNUT 所述，“边框”图像中的框偏离了中心。我将图像居中并重新上传。作为替代方案，您可以向“信封”图像添加 1 像素的左边距，以针对偏离中心的框进行调整。

img.rotate {
    margin-left:1px;
}

An example of that