我有以下元素
<a href="#" class="some_class">Test Text Here</a>
并且此元素具有浅蓝色背景和一些填充。今天我遇到了一个小挑战:我知道我们可以旋转元素,但它的内容也是旋转的。我想要实现的目标如下:
因此元素本身略微旋转,但其内容保持不变。这可以通过CSS3实现吗?我尝试使用几个嵌套元素,但是通过旋转它们的父元素也可以旋转所有子元素。也可以用单个元素完成,如上所述的例子?
答案 0 :(得分:15)
当然,如果您将文字换成一个范围,那么将范围设置为position: absolute
,并将transform
设置为与“默认”相反的方向相等的数量。
我建议反对在您上面提议的案例中对您的链接强加文字,因为您希望文本 INSIDE 用于SEO目的的锚标记。
所以...我顺时针旋转<a>
10度,逆时针旋转<span>
10度。
***** ALTERNATIVELY ** - 你也可以设置跨度来显示:block;并放弃绝对定位。这取决于您的使用案例。在这种情况下,绝对定位它可以让你用更多的控制来移动文本。
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)
您有两个我知道的选项: