слегка вращать текст - я должен использовать CSS или JavaScript?

Question

Я пытаюсь повернуть блок текста, как показано ниже:

Можно ли это сделать с помощью css или мне нужно использовать javascript?

Answer 1

Вы можете сделать это кросс-браузерным способом, используя CSS3 transform и filter для 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.Вот CSS, который будет работать в Firefox, Opera и Safari / Chrome.

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