Question

或使用CSS

控制旋转到特定度数

Answer 1

您可以使用transform: rotate(35deg)。更多this article。目前，您还必须添加特定于供应商的transforms，例如（来自文章）：

.rotate35 {
    /* Safari */
    -webkit-transform: rotate(35deg);

    /* Firefox */
    -moz-transform: rotate(35deg);

    /* IE */
    -ms-transform: rotate(35deg);

    /* Opera */
    -o-transform: rotate(35deg);

    /* Standard */
    transform: rotate(35deg);
}

对于需要filter的旧IE，您可以执行35度角。这适用于IE7和IE8：

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.81915204, M12=-0.57357644, M21=0.57357644, M22=0.81915204,sizingMethod='auto expand');

但请注意，矩阵变换将为您留下与上面显示的CSS3方式不同的偏移量。您可以通过将-webkit-transform-origin设置为left top来补偿CSS3，或者通过使用条件样式表或CSS hack定位元素来补偿IE端。

查看MS docs或cool page I used以生成上述内容。

Answer 2

除了它的CSS3之外，它当然在“跨浏览器”支持方面存在问题。但简而言之，是的，在CSS3中。

示例链接：http://www.thecssninja.com/css/real-text-rotation-with-css

Answer 3

使用

-webkit-transform:rotate(35deg);
-moz-transform:rotate(35deg);
transform:rotate(35deg);

适用于几乎所有浏览器。

Answer 4

检查出来：http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215，更具体地说是旋转（角度）功能。

请注意，这仅适用于CSS3。

有没有办法用CSS创建35度角的文本？

4 个答案: