将图像旋转90度并完全位于div内

Question

好的，这是小提琴。

http://jsfiddle.net/ozzy/mnmc7/

代码在这个阶段非常基础，但基本上就是css：

.Box {
    width:660px;
    border: 1px solid #aaaaaa;
    border-radius: 3px 3px 3px 3px;
    height:140px;
}
#Logo {
    position:absolute;
    -moz-transform:rotate(270deg);
    transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    z-index:inherit;
    zoom:1;
}

到目前为止是html：

<div class="Box">
                                <div id="Logo">
                                    <img src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" width="130px">
                                </div>
                            </div>

这个想法是让图像准确地位于div中，并将其浮动到左边，例如5px边距。所以它看起来像这样：

Answer 1

尝试将此添加到徽标：

position:relative;
float:left;
top:43px;
left:-33px;

同样在Internet Explorer 9中，他们希望您使用rotation = 4

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

http://jsfiddle.net/AlienWebguy/mnmc7/21/

Answer 2

如果你想这样做，只需给#logo一个顶部和左边的值http://jsfiddle.net/mnmc7/13/