3

Eu gostaria de poder girar uma div, e para isso usei 'transform', no CSS, porém eu gostaria que uma div ficasse sobreposta. Eis o código:

#divgirada {
  width: 500px;
  height: 500px;
  background: red;
  transition-duration: 1s;
}

#divgirada:hover {
  transform: rotate(10deg);
}

#divparada {
  width: 500px;
  height: 500px;
  background: blue;
  margin-top: -200px;
  margin-left: 200px;
}
<html>

<head>
  <title>Teste de rotação</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="divgirada"></div>
  <div id="divparada"></div>
</body>

</html>

O problema é que, apesar da div azul ficar em cima, no momento em que a div vermelha gira ela sobrepõe a azul. Como girar a div vermelha mas fazer com que a div azul continue em cima?

1 Resposta 1

1

Como no que pus em baixo, bastou adicionar um position:relative nas 2 divs e pôr z-index em ambos, pondo o azul com o valor maior para ficar por cima

#divgirada {
  position:relative;
  z-index:998;
  width: 500px;
  height: 500px;
  background: red;
  transition-duration: 1s;
}

#divgirada:hover {
  transform: rotate(10deg);
}

#divparada {
  position:relative;
  z-index:999;
  width: 500px;
  height: 500px;
  background: blue;
  margin-top: -200px;
  margin-left: 200px;
}
<html>

<head>
  <title>Teste de rotação</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="divgirada"></div>
  <div id="divparada"></div>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .