我有以下元素
<a href="#" class="some_class">Test Text Here</a>
这个元素有浅蓝色背景和一些填充.今天我碰到一个小挑战：我知道我们可以旋转元素,但是它的内容也是旋转的.我试图实现的看起来像这样：
因此,元素本身稍微旋转,但其内容保持原样. CSS3可以实现吗？我尝试玩几个嵌套元素,但是通过旋转他们的父元素所有的子元素也旋转.也可以用单个元素来完成,如上所述的例子？
解决方法
当然,如果你把文本包在一个span中,那么将span设置为absolute：将相反的方向转换成“default”.
我建议您反对在您的上述案例中超链接您的链接文本,因为您希望文本在锚点标记内部进行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);
}
