No HTML/CSS, o usuário pode adicionar elementos diferentes, e a incorporação de imagens é uma delas. Eles também podem aplicar propriedades diferentes do CSS para tornar as páginas da web mais atraentes, como imagens de fundo girando, aplicando bordas, definindo a opacidade da página e muito mais. CSS também fornece um “transformar”Propriedade utilizada para aplicar a transformação multidimensional em um elemento.

Este tutorial ilustrará:

• Como adicionar imagem em um contêiner?
• Como girar a imagem de fundo no recipiente?

Como adicionar imagem em um contêiner?

Para adicionar uma imagem a um contêiner, siga as etapas listadas.

Etapa 1: Insira o cabeçalho

Primeiro, adicione um título usando o “

”Tag na página HTML. Então, insira o “alinhar”Valor do atributo para definir o alinhamento do cabeçalho no centro.

Etapa 2: Crie um contêiner div

Em seguida, crie um ““Container e alocar os atributos da classe“ Image-container ”e“ Align ”.

Etapa 3: Adicione a imagem em um contêiner div

Então, insira um “”Tag junto com os seguintes atributos:

• O "src”O atributo especifica o URL do arquivo de mídia.
• ““alt”É utilizado para definir o texto para uma área especificada se a imagem não for exibida.
• ““largura”Aloca a largura da imagem.
• ““altura”Atributo define a altura da imagem.
• ““estilo”É usado para especificar o estilo CSS, incluindo borda e cor para elementos:

Imagem html

Saída

Como girar a imagem de fundo no recipiente?

Experimente as instruções fornecidas abaixo para girar a imagem no recipiente.

Etapa 1: Contêiner de acesso

No CSS, primeiro, acesse o “Image-container”Classe com a ajuda de um seletor de pontos.

Etapa 2: gire a imagem “30” graus

Depois de acessar o “Contêiner, aplique as seguintes propriedades CSS:

.Image-container
Transformar: girar (30deg);
largura: 30%;
altura: 30%;
Size de fundo: capa;
margem: 30px;

Aqui:

• O "transformar”A propriedade é utilizada para girar o recipiente. Por exemplo, a função CSS “girar (30deg)”Especifica uma transformação que gira o elemento em direção a um ponto fixo no plano 2D.
• ““altura”Propriedade aloca a altura para um elemento.
• ““tamanho de fundo”Aloca o tamanho do fundo do elemento.
• ““margem”Propriedade define o espaço em branco para um elemento no lado externo do elemento definido.

Pode -se observar que a imagem é girada para 30 graus do recipiente da div:

Etapa 4: gire a imagem “60” graus

Para girar a imagem para 60 graus, defina o valor do “girar ()" funciona como "60 graus”:

Transformar: girar (60deg);

Saída

Este post declarou o procedimento para girar a imagem de fundo no recipiente.

Conclusão

Para girar a imagem no recipiente, primeiro, crie um “”E adicione a imagem utilizando o“" marcação. Em seguida, acesse a classe para aplicar o “transformar”Propriedade para girar a imagem com o valor especificado. Os usuários podem aplicar outras propriedades do CSS para estilizar o elemento, como “altura","tamanho de fundo", e "margem”. Este post demonstrou o método para girar a imagem em um recipiente.