html – 是否可以旋转元素,但不是它的内容与css3？

发布时间：2020-12-14 18:53:36 所属栏目：资源来源：网络整理

导读：我有以下元素 a href="#" class="some_class"Test Text Here/a 这个元素有浅蓝色背景和一些填充.今天我碰到一个小挑战：我知道我们可以旋转元素,但是它的内容也是旋转的.我试图实现的看起来像这样：因此,元素本身稍微旋转,但其内容保持原样. CSS3可以实现吗

我有以下元素

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

这个元素有浅蓝色背景和一些填充.今天我碰到一个小挑战：我知道我们可以旋转元素,但是它的内容也是旋转的.我试图实现的看起来像这样：

因此,元素本身稍微旋转,但其内容保持原样. CSS3可以实现吗？我尝试玩几个嵌套元素,但是通过旋转他们的父元素所有的子元素也旋转.也可以用单个元素来完成,如上所述的例子？

解决方法

当然,如果你把文本包在一个span中,那么将span设置为absolute：将相反的方向转换成“default”.

我建议您反对在您的上述案例中超链接您的链接文本,因为您希望文本在锚点标记内部进行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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!