Uma maneira muito simples de girar os elementos de uma página de site da Web - basta aplicar alguns estilos de CSS. A familiarização com esta lição permitirá que você coloque um leque de cartão desdobrado, folhas caídas espalhadas ou fotos estilosas em um álbum na página. A lição contém um exemplo de implementação de um álbum de fotos e leva em consideração a solução para todos os navegadores modernos.
É necessário
Quatro fotos de até 450px de largura
Instruções
Passo 1
Este exemplo se concentrará na criação de uma página de álbum estilosa com fotos giradas.
Preparei com antecedência imagens (largura 400px) com endereços:
No futuro, atribuiremos IDs às imagens de acordo com seus nomes.
Passo 2
Primeiro, prepararemos um bloco para nosso álbum de fotos usando a tag div, e também adicionaremos fotos a ele usando a tag img (cada imagem deve ser incluída em sua própria tag div), assim:
Observe que atribuímos um identificador ao bloco -. Pelo identificador, podemos nos referir ao bloco usando css.
etapa 3
Em seguida, você precisa definir os estilos css para o bloco. Lista de estilos: "posição: relativa;" - definirá a origem do canto superior esquerdo do nosso bloco; "margem: 50px auto;" - irá definir o recuo do nosso bloco “50px” acima e abaixo do resto do conteúdo da página, bem como definir o recuo automático para a direita e esquerda, alinhando assim o nosso bloco no centro; "largura: 900px; altura: 650px;" - definirá a largura como 900 px e a altura como 650 px, respectivamente.
A lista de estilos especificada deve ser colocada desta forma:
#photo_page {
posição: relativa;
margem: 0 automático;
largura: 900px;
altura: 650px;
alinhamento de texto: centro;
}
Observe o uso de "#photo_page" - é assim que nos referimos ao ID do bloco.
Passo 4
Agora vamos atribuir estilos gerais para cada imagem dentro do bloco photo_page. São cantos arredondados, borda cinza, fundo branco, preenchimento e sombra projetada.
Isso criará um efeito fotográfico:
#photo_page img {
raio da borda: 7px;
borda: 1px cinza sólido;
plano de fundo: #ffffff;
preenchimento: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Observe o uso de "#photo_page img" - isso se refere a todas as imagens dentro do bloco photo_page
Etapa 5
Também é importante adicionar um estilo curto como este:
#photo_page div {
flutuar: esquerda;
}
Ele reduz todos os blocos dentro do bloco photo_page à esquerda.
Etapa 6
O estágio intermediário da lição agora foi concluído. Se o seu trabalho for semelhante à imagem na captura de tela, você não cometeu um erro e pode prosseguir para a próxima etapa.
Etapa 7
Agora vamos girar as fotos postadas. Para isso, precisamos do estilo de transformação. No momento, em sua forma pura, não é utilizado, mas apenas com um prefixo para cada navegador no início, assim:
-webkit-transform: rotate (valor);
-moz-transform: rotate (valor);
-o-transformar: girar (valor);
Este é o estilo de rotação para navegadores: Google Chrome, Mazilla, Opera (respectivamente). Em vez da palavra "valor", inseriremos um número com deg no final, assim:
90 graus - gire 90 graus no sentido horário.
-5deg - gira -5 graus no sentido anti-horário.
Etc.
Etapa 8
Estilo para foto photo_1:
# photo_1 {
-webkit-transform: rotate (5deg);
-moz-transform: rotate (5deg);
-o-transformada: girar (5deg);
}
A primeira imagem é girada 5 graus.
Etapa 9
Estilo para a foto photo_2:
# photo_2 {
-webkit-transform: rotate (-3deg);
-moz-transform: rotate (-3deg);
-o-transformada: girar (-3deg);
}
A segunda imagem é girada -3 graus.
Etapa 10
Estilo para foto photo_3:
# photo_3 {
-webkit-transform: rotate (-2deg);
-moz-transform: rotate (-2deg);
-o-transformada: girar (-2deg);
}
A terceira imagem é girada -2 graus.
Etapa 11
Estilo para foto photo_4:
# photo_4 {
-webkit-transform: rotate (8deg);
-moz-transform: rotate (8deg);
-o-transformada: girar (8 graus);
}
A quarta imagem é girada 8 graus.
Etapa 12
Vamos ver como você pode corrigir a posição das imagens. Por exemplo, você deseja deslocar a primeira imagem 20 px da parte superior e 10 px da esquerda. Nesse caso, você precisa usar o estilo de margem. Esta é a maneira correta de usá-lo em nosso caso:
# photo_1 {
margem: 20px -10px -20px 10px;
-webkit-transform: rotate (5deg);
-moz-transform: rotate (5deg);
-o-transformada: girar (5deg);
}
Observe que o primeiro valor do estilo é a margem superior; o segundo é o recuo à direita; o terceiro é um recuo na parte inferior; quarto - recuo à esquerda.
Importante: no nosso caso, a margem inferior é igual ao valor negativo da margem superior. Se você vir um espaço em branco abaixo da imagem em sua página, tente recuar a parte inferior da imagem ainda mais negativamente.
Etapa 13
O trabalho está completo, forneço uma captura de tela (levando em consideração a mudança no recuo da primeira imagem descrita no Passo 12).
Adicione um estilo de recuo a qualquer imagem que não esteja na posição adequada para você.
