是否可以旋转元素，但不能使用css3来旋转元素？

我有以下元件是否可以旋转元素，但不能使用css3来旋转元素？

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

并且该元件具有淡蓝色背景和一些填充。今天我遇到了一个小挑战：我知道我们可以旋转元素，但是其内容也是旋转的。我是想实现看起来像这样：

enter image description here

所以元件本身稍微旋转，但其内容留在原地。用CSS3可以实现吗？我尝试了几个嵌套元素，但是通过旋转它们的父元素也旋转了所有子元素。这也可以用单个元素来完成，就像上面所说的例子那样？

来源

2013-05-20 Ilja

不嵌套元素，只是叠加在蓝色的div文字 – Sebas

@Sebas哇，我第一次听到的叠加，让我做了一些研究，这个 – Ilja

另一种选择是有文本的嵌套子项，将旋转应用于父项，然后将反向旋转应用于子项。（尽管我更喜欢Sebas的方法，根本就没有嵌套。） – dlev

当然，如果你在包装的跨度文本，然后跨度设定为position: absolute，并transform其等量相反的方向，以“默认”了。

我建议对超级强加在你的链接文字对你提出的上述情况，只要你想文本是INSIDE的搜索引擎优化的目的锚标记。

所以...我旋转了<a> 10度的顺时针旋转了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); 
}

来源

2013-05-20 19:03:45 Michael

非常有用！谢谢！ –

你有2个选择，我知道的：

让他们独立的元素，只是旋转背景图像/格。如果您需要动画旋转，则此方法可以工作。
如果您正在使用图像，请将背景图像保存为预偏斜。

来源

2013-05-20 19:03:30

是否可以旋转元素，但不能使用css3来旋转元素？

回答

相关问题