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

时间:2013-05-20 18:55:03

标签: html css css3

我有以下元素

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

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

enter image description here

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

2 个答案:

答案 0 :(得分:15)

当然,如果您将文字换成一个范围,那么将范围设置为position: absolute,并将transform设置为与“默认”相反的方向相等的数量。

我建议反对在您上面提议的案例中对您的链接强加文字,因为您希望文本 INSIDE 用于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);
}

答案 1 :(得分:0)

您有两个我知道的选项:

  1. 将它们分开,然后旋转背景图像/ div。如果需要为旋转设置动画,此方法将起作用。
  2. 如果您使用的是图像,请将背景图像保存为预先倾斜。