是否可以旋转元素,而不是css3的内容？

Question

我有以下元素

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

这个元素有浅蓝色背景和一些填充.今天我遇到了一个小挑战:我知道我们可以旋转元素,但它的内容也是旋转的.我想要实现的目标如下:

因此元素本身略微旋转,但其内容保持不变.这可以通过CSS3实现吗？我尝试使用几个嵌套元素,但是通过旋转它们的父元素也可以旋转所有子元素.也可以用单个元素完成,如上所述的例子？

Answer 1

当然,如果你将文本换成一个跨度,那么将跨度设置为position: absolute,并将transform其设置为与"默认"它相反的方向.

我建议不要在你上面建议的案例中对你的链接强加超文本,因为你希望文本在INS标签中用于SEO目的.

所以...我<a>顺时针旋转10度,逆时针旋转<span>10度.

*****ALTERNATIVELY** - 你也可以设置显示的范围: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);
}