Como adicionar várias imagens de fundo e girar objetos com css3

Com CSS3, você pode facilmente adicionar o maior número de imagens de fundo para qualquer um elemento como quiser. Você também pode girar 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.

Video: Background Fixo no CSS

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

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

Como um fallback 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 observado aqui pela /* cair pra trás */ comentários. Este método assegura 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 girando 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 objectos podem ser rodados 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 métodos especificando valores numéricos ou graus para o eixo X e do eixo 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 * /}