Question

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

#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); 
}

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

这是小提琴要求：

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

css transform：旋转属性，不需要的边框

1 个答案: