Transform

Se você estiver fazendo seu layout com a propriedade float, ao adicionar uma div sem a propriedade float, ela vai lá pra cima.

O seu layout está em float?

Isso também pode acontecer se a sua div estiver com position: absolute

Allan, ele está em position: absolute. Então quando está assim ou em float, não tem como selecionar todos no mesmo padrão?

Consegue, bastaria dizer que a div pai tem o position: relative. Isto foi ensinado no curso.

De qualquer maneira, se você fizesse como está dizendo, não precisaria criar uma div, poderia simplesmente adicionar uma classe no elemento ul que é pai dos li e dizer que todos os elementos li dentro da classe da ul deveriam receber a propriedade transform.

Ex:

HTML

<ul class="palavras-header">
    <li class="palavra-home eficiencia">Eficiência</li>
    <li class="palavra-home boas-praticas">Boas práticas</li>
    <li class="palavra-home codigo-limpo">Código limpo</li>
    <li class="palavra-home css3">CSS3</li>

    <!-- As outras li's -->

</ul>

CSS

.palavras-header li {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}

Entretanto o problema nisso aí é que todas as palavras vão ter o mesmo grau de rotação. Não há como fazer pra todas de uma vez só com CSS.

Talvez seja possível fazer com SASS. Teria que utilizar uma função que gerasse algum valor aleatório, apesar de não entender muito de SASS ainda acho que talvez não dê pra fazer tudo de uma vez com o comando em uma classe só. Provavelmente teria que colocar uma função em cada classe, talvez ficasse mais fácil, ou não, se for o tipo de coisa que vai usar só uma vez teria mais trabalho pra criar a função que pra fazer o código simples em cada classe.