0

css transform プロパティを使用して Web ページのロゴを回転させています。ロゴ自体は、相対位置と絶対位置を持つ複数の内部 div で構成されています。WholeLogo の id を持つすべてのものを保持する外側の div があり、これをスタイル シートに入れて回転させます。

#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 の周りに奇妙な破線の境界線が表示されます。なぜこれが起こるのか、それを止める方法を知っている人はいますか?

ここにフィドルが要求されています：

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

ロゴの各部分が 2 つずつある理由が気になる場合は、色のグラデーションとテキストの影が必要なためです。しかし、これら 2 つのことは互いにうまく機能していないように思われるので、1 つのコピーを作成し、もう 1 つのコピーをもう 1 つ作成して、それらをオーバーラップさせました。

最悪のシナリオは、回転を解除して画面キャプチャを行い、ペイントなどで回転させて画像として戻すことですが、可能であればこれを避けたいと思います.

4

1 に答える 1

0

これを試してみてください

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);
}
于 2012-09-06T06:39:36.557 に答える