稍微旋转文字 - 我应该使用CSS还是javascript？

Question

我试图像下面一样旋转一段文字：

这可以用css完成，还是需要使用javascript？

Answer 1

您可以使用CSS3的transform和IE的filter以跨浏览器的方式进行此操作。

请参阅： http://jsfiddle.net/dRQaw/

This is the magical tool used to generate the cross-browser 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);
}