2

Olá, estou querendo criar a segunda figura na imagem, a forma oval com perspectiva, ja fiz a forma oval, porém, com perspectiva não estou conseguindo.

inserir a descrição da imagem aqui

  #oval {
      width: 200px;
      height: 100px;
      background: red;
      border-radius: 100px / 50px;
    }
  
<div id="oval"></div>

Como colocar perspectiva na forma oval como CSS ?

1 Resposta 1

3

Cara inicialmente vc precisa colocar o circulo dentro de um container, e nesse container vc coloca o valor da perspectiva, que seria a distancia entre a tela e o olho do usuário no eixo Z. Depois no elemento oval vc usa um transform rotateX() para ele rotacionar no plano X do próprio eixo.

inserir a descrição da imagem aqui

Código da imagem acima

.box{
  perspective: 400px;
  transform-style: preserve-3d;
  display: inline-block;
}
#oval {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to bottom, #f00 0%, #000 100%);
    border-radius: 100px / 50px;
    transform: rotateX(0deg);
    animation: gira 1s infinite alternate;
}
@keyframes gira {
  to {
    transform: rotateX(45deg);
  }
}
<div class="box">
  <div id="oval"></div>
</div>

Recomendo muito que leia esse excelente artigo: https://css-tricks.com/how-css-perspective-works/

3
  • 1
    Thanks bro, vlw mesmo vou marca a resposta obg. Commented 22/09/2020 às 12:35
  • @AnotherBrink valeu a força, se marcar ✓eu agradeço, não deixe de dar uma olhada no link, é bem didático com exemplos e tudo para vc trabalhar outras perspectivas :D
    – hugocsl
    Commented 22/09/2020 às 12:36
  • Marquei ja, o link eu ja tinha lido mais não tinha entendio, porque li por cima estou relendo. obg. Commented 22/09/2020 às 12:47

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 .