16

私は次の要素を持っています

<a href="#" class="some_class">Test Text Here</a>

この要素には水色の背景といくつかのパディングがあります。今日、私は 1 つの小さな課題に遭遇しました。要素を回転できることはわかっていますが、その内容も回転しています。私が達成しようとしていたことは次のようになります。

ここに画像の説明を入力

したがって、要素自体はわずかに回転しますが、その内容はそのまま残ります。これは CSS3 だけで実現できますか? いくつかのネストされた要素をいじってみましたが、親要素を回転させると、すべての子要素も回転しました。また、上記の例のように、これを単一の要素で行うことはできますか?

4

2 に答える 2

19

確かに、テキストをスパンでラップする場合は、スパンを に設定position: absoluteしtransform、反対方向に同じ量を「デフォルト」に設定します。

SEO の目的でテキストをアンカー タグの内側に配置する必要があるため、上記の提案されたケースでテキストをリンクに重ねることはお勧めしません。

それで...<a>時計回りに 10 度回転させ、反時計回りに<span>10 度回転させました。

*****代わりに** - スパンを表示するように設定することもできます: ブロック; 絶対位置を落とします。ユースケースによって異なります。この場合、絶対的な位置に配置すると、もう少し制御してテキストを移動できます。

http://jsfiddle.net/B95xa/

a {
    color: #fff;
    display: block;
    width: 100px;
    height: 30px;
    background: blue;
    border-radius: 5px;
    -moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

span {
    position: absolute;
    -moz-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
于 2013-05-20T19:03:45.827 に答える
0

私が知っている2つのオプションがあります：

  1. それらを別々の要素にして、背景画像/ divを回転させるだけです。この方法は、回転をアニメートする必要がある場合に機能します。
  2. 画像を使用している場合は、背景画像を事前に歪ませて保存します。
于 2013-05-20T19:03:30.497 に答える