html - 是否可以旋转元素，但不能使用 css3 旋转其内容？

Question

我有以下元素

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

这个元素有浅蓝色背景和一些内边距。今天我遇到了一个小挑战:我知道我们可以旋转元素，但是它的内容也会旋转。我试图实现的目标如下所示:

所以元素本身稍微旋转，但它的内容保持在原位。这仅使用 CSS3 就可以实现吗？我试着玩弄几个嵌套元素，但是通过旋转它们的父元素，所有子元素也会旋转。这也可以用单个元素来完成，就像上面的例子一样吗？

Answer 1

当然，如果将文本包装在一个跨度中，则将跨度设置为 position: absolute , 和 transform它在相反方向上与“默认”它等量。

我建议反对在您上面提出的案例中将文本叠加在您的链接上，因为您希望文本位于 INSIDE 用于 SEO 目的的 anchor 标记。

所以...我旋转了<a>顺时针旋转 10 度，并旋转了 <span>逆时针旋转 10 度。

*****可选** - 您还可以将跨度设置为显示: block ；并放弃绝对定位。这取决于您的用例。绝对定位，在这种情况下，可以让您以更多的控制来移动文本。

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