稍微旋转文本——我应该使用 css 还是 javascript？

Question

我正在尝试旋转一段文本，如下所示：

这可以用 css 来完成吗？我需要使用javascript吗？

Answer 1

您可以使用 CSS3 的 transform< 以跨浏览器的方式完成此操作/a>，以及 IE 的过滤器。

参见： http://jsfiddle.net/dRQaw/

这是用来生成跨浏览器CSS的神奇工具。

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div>

#skewed {
    font: 21px Impact, sans-serif;
    text-align: center;
    background: #ccc
}
#skewed {
     width:             350px;
     height:            140px;

     -moz-transform:    skew(-5deg, -5deg);
     -o-transform:      skew(-5deg, -5deg);
     -webkit-transform: skew(-5deg, -5deg);
     transform:         skew(-5deg, -5deg);
}    

Answer 2

您可以使用 CSS3 转换来做到这一点：

p {
  -moz-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Answer 3

它将是纯 CSS 的。您可以使用 JS 来操作 CSS，但 JS 本身与表示没有任何关系，只是作为更改表示规则的一种方法。

Answer 4

你可以使用CSS。这是适用于 Firefox、Opera 和 Safari/Chrome 的 CSS。

#textToRotate {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
}