16

我有以下元素

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

这个元素有浅蓝色背景和一些填充。今天我遇到了一个小挑战：我知道我们可以旋转元素，但是它的内容也可以旋转。我试图实现的目标是这样的：

在此处输入图像描述

所以元素本身会稍微旋转，但它的内容保持在原位。这仅使用 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 回答