是否可以旋转元素，但不是它的内容与css3？ [英] Is it possible to rotate element, but not its content with css3?

问题描述

我有以下元素

 < a href =＃class =some_class> ; / a> 
  

，此元素有浅蓝色背景和一些填充。今天我遇到了一个小挑战：我知道我们可以旋转元素，但其内容也旋转。我想要达到的效果如下：

因此元素本身稍微旋转，但是其内容保持不变。这是可以实现的只是CSS3？我试着玩几个嵌套的元素，但是通过旋转它们的父元素所有子元素也旋转。也可以使用单个元素，像上面的例子一样。

解决方案

当然，然后将跨度设置为 position：absolute 和 transform ，它的方向与default相反。

我建议您在上述提议的案例中，通过您的链接对文本进行超链接，因为您希望文本 > INSIDE 用于SEO目的的锚标签。

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

**** * ALTERNATIVELY ** - 你也可以设置span来显示：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 
 -webkit-transform：scale（1）rotate（10deg）translateX（0px）translateY（0px）skewX（0deg）skewY 
 -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 
 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 
 -webkit-transform：scale（1）rotate（-10deg）translateX（0px）translateY（0px）skewX（0deg）skewY 
 -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 
 transform：scale（1）rotate（-10deg）translateX（0px）translateY（0px）skewX（0deg）skewY 
} 
  

I have the following element

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

and this element has light blue background and some padding. Today I came across one small challenge: I know we can rotate element, however its contents are also rotated. What I was trying to achieve looks like this:

So the element itself is slightly rotated, however its contents stay in place. Is this achievable just with CSS3? I tried playing around with several nested elements, however by rotating their parent element all child elements rotated as well. Also can this be done with single element, like example stated above?

解决方案

Sure, If you wrap the text in a span, then set the span to position: absolute, and transform it the equal amount in the opposite direction to "default" it.

I would suggest against super-imposing the text over your link in your proposed case above, as you want the text to be INSIDE the anchor tag for SEO purposes.

So... I rotated <a> 10 degree's clockwise, and rotated the <span> 10 degree's counter-clockwise.

*****ALTERNATIVELY** - You could also set the span to display: block; and drop the absolute positioning. It depends on your use case. Absolute positioning it in this case would allow you to move the text around with a little more control.

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

这篇关于是否可以旋转元素，但不是它的内容与css3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！