css转换:旋转属性，不需要的边框

Question

我正在使用css转换属性来旋转网页的徽标。标志本身由几个具有相对和绝对位置的内部div组成。我有一个外部div，它包含整个id为wholeLogo的东西，我把它放在样式表中旋转它：

#wholeLogo {
    border: none;
    width: 600px;
    margin: 0 auto;
    margin-top: 15px;
    transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg); 
    -o-transform: rotate(-7deg); 
    -moz-transform: rotate(-7deg); 
}

徽标旋转正确，但我在整个徽标div内的每个div周围都有一个奇怪的虚线边框。有人知道为什么会发生这种情况以及如何使其停止吗？

这是Fiddle请求的：

http://jsfiddle.net/CbsUT/1/

如果你想知道为什么每个标志都有两个副本，那是因为我想要颜色渐变和文本阴影。但这两件事似乎不太好相处，所以我用一个和另一个复制了一个，并将它们重叠在一起。

最糟糕的情况是，我展开它，进行屏幕捕捉，在油漆或其他东西中旋转它，然后将其作为图片带回，但如果可能的话，我希望避免这种情况。

Answer 1

试试这个

HTML:-

<div id="wholeLogo">
  <h1 data-title="Logo"> <a href="#">Logo</a> </h1>
</div>

CSS：-

#wholeLogo {
    width: 600px;
    margin: 0 auto;
    margin-top: 35px;
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
}
h1 {
    position: relative;
    font-style: italic;
    font-family: Verdana;
    font-weight:normal;
    text-transform:uppercase;
    font-size:100px;
    text-shadow: 2px 3px 1px #292929;
}
h1 a {
    text-decoration: none;
    position: absolute;
    color: #0032ff;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(20%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
h1 a:hover {
    color: #0032ff;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}
h1:after {
    color: #dc0000;
    content : attr(data-title);
}