Como adicionar Fundo múltiplas imagens e girar objetos com CSS3

Com CSS3, você pode facilmente adicionar quantas imagens de fundo para qualquer um elemento como quiser. Você também pode rodar imagens. A ilustração mostra um exemplo de um recipiente com três imagens de fundo, um padrão, e dois arquivos PNG com transparência.

A maneira mais simples de adicionar múltiplas imagens é separar cada um por uma vírgula, certificando-se de colocar a imagem que deseja estar na posição mais alta primeiro e quaisquer imagens adicionais abaixo na ordem de empilhamento desejada:

.caixa de {/ * fallback * / background: url (bg-full.png) superior esquerdo no-repeat - / * modernos navegadores * / background: url (bg-top.png) superior esquerdo no-repeat, url (bottom-bg .png) inferior repeat-x-direito no-repeat, url (bg-middle.png) deixou}

Como uma alternativa para navegadores mais antigos, você pode incluir uma única imagem que tem todos os elementos combinados de suas imagens separadas no topo do bloco de estilo, como notado aqui pela /* cair pra trás */ comentários. Esse método garante que os navegadores mais antigos exibir a primeira imagem e ignorar o resto.

Como um web designer, uma das maneiras que você pode adicionar algum interesse para seu projeto 2D é para romper com a estrutura linear da rede, rodando um objeto no espaço. Com CSS3, você pode facilmente girar um objeto através da aplicação da transform: gire estilo a qualquer objeto:

.gire {transform: rotate (-4deg) - webkit-transform: rotate (-4deg) - / * Safari e Chrome * / - moz-transform: rotate (-4deg) - / * Firefox * / - o-transform: gire (-4deg) - / * Opera * /}

Os objetos podem ser girado no sentido horário (4deg) Ou anti-horário (-4deg). Você também pode dimensionar e inclinar um objeto com o escala() e inclinação () transformar os métodos especificando valores numéricos ou graus para o eixo X e Y:

div {transformação: escala (3,6) - ms-transform: escala (3,6) - / * IE 9 * / - webkit-transform: escala (3,6) - / * Safari e Chrome * / - o -Transforme: escala (3,6) - / * Opera * / - moz-transform: escala (3,6) - / * Firefox * /} div {transform: inclinação (10deg, 20deg) - ms-transform: inclinação (10deg, 20deg) - / * IE 9 * / - webkit-transform: inclinação (10deg, 20deg) - / * Safari e Chrome * / - o-transform: inclinação (10deg, 20deg) - / * Opera * / - moz -Transforme: inclinação (10deg, 20deg) - / * Firefox * /}