11

Como eu posso reproduzir a imagem abaixo utilizando HTML, CSS e JS (talvez imagens)? O números de "andares" é imprevisível e cada "andar" deve ser "clicável", um <a href="#"></a>, ou algo assim.

prédio

É possível fazer?

6
  • Possível até seria, talvez utilizando um Canvas, ou SVG, com auxilio de alguma biblioteca (talvez D3.js), mas acredito que seria algum bem complicado e trabalhoso, há real necessidade de 3D? 18/02/2015 às 15:46
  • Eu coloquei o 3D entre aspas por isto. Eu preciso apenas desta impressão de 3D, com esta dobra em um dos vértices. Canvas e SVG provavelmente não terão suporte no IE9, mas eu pesquisarei. Obrigado, @Fernando 18/02/2015 às 15:51
  • A fachada da frente é trivial (já que é retangular), mas as do lado iriam demandar algum ajuste (talvez uma transformação CSS3 seria suficiente, não precisaria de canvas). O que você pretende colocar nesse espaço? Imagens/HTML customizado, ou todo andar é igual, só muda o texto?
    – mgibsonbr
    18/02/2015 às 16:07
  • @erickalves05, o máximo que consegui, chegar usando somente html e css3, foi aqui. Mas ta mais para um menu do que prédio. Hehe. Talvez SVG, com CSS3 seja o melhor caminho. 18/02/2015 às 16:30
  • @mgibsonbr só mudaria o texto mesmo. 18/02/2015 às 19:18

1 Resposta 1

17

Pode-se fazer o que você quer usando apenas HTML e transformações CSS3. Essa ferramenta serve como um ponto de partida, para você experimentar com as opções disponíveis, mas para um maior controle é melhor fazer manualmente. A forma de usar é:

  1. Coloque no seu CSS a propriedade transform, seguida de uma ou mais operações de transformação;
  2. A operação skew (nota: não-standard) serve para inclinar o elemento, e a operação translate o desloca; ambas as operações ocorrem na horizontal;
    • Nota: existem variantes skewX e skewY, tranlateX e translateY, etc.
  3. A operação rotate rotaciona o elemento; qualquer operação subsequente já leva em consideração o elemento rotacionado, de modo que se você quer deslocar um elemento verticalmente, por exemplo, gire-o 90 graus, desloque-o, e gire-o 90 graus novamente (se for o caso).
  4. A operação scale aumenta/diminui o elemento em escala.

Essas são algumas operações simples. Para uma lista mais completa, ver essa documentação no MDN. Note que nem todas elas podem ser suportadas por todos os browsers, e alguns deles exigem um prefixo (-webkit-, -moz-, -o-, -ms-) antes de transform, já que essa propriedade ainda não foi totalmente padronizada.

Abaixo está um exemplo bem tosco do que pode ser feito. Ele inclina o topo; desloca a frente; desloca, gira, escala, inclina, e desloca novamente os lados, de modo a colocá-los no lugar adequado. Os elementos são HTML comum, de modo que você pode colocar ali o que quiser. Tanto a frente quanto o lado é clicável, e coloquei também um efeito hover para mudar a cor do andar sob o mouse.

#topo {
  background-color: blue;
  width: 102px;
  height: 30px;
  transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  -moz-transform: skewX(-45deg);
  -o-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  margin: 20px;
}

#andares {
  list-style-type: none;
  margin: 20px;
}

#andares .frente {
  background-color: red;
  width: 100px;
  height: 30px;
  transform: translate(-54px);
  -webkit-transform: translate(-54px);
  -moz-transform: translate(-54px);
  -o-transform: translate(-54px);
  -ms-transform: translate(-54px);
  margin-top: -18px;
}

#andares li:hover .frente {
  background-color: yellow;
}

#andares .lado {
  background-color: green;
  width: 20px;
  height: 20px;
  margin: 1px;
  transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -webkit-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -moz-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -o-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
  -ms-transform: translate(52px) rotate(90deg) scale(1.5) skewX(45deg) translate(-27px);
}

#andares li:hover .lado {
  background-color: cyan;
}
<div id="topo"></div>
<ul id="andares">
  <li><a href="http://google.com"><div class="frente">Google</div><div class="lado"></div></a></li>
  <li><a href="http://facebook.com"><div class="frente">Facebook</div><div class="lado"></div></a></li>
  <li><a href="http://twitter.com"><div class="frente">Twitter</div><div class="lado"></div></a></li>
</ul>

1
  • Eita, né que conseguiu mesmo, e sem svg, ficou bacana (comparado ao meu), e ótima explicação. +1 18/02/2015 às 16:45

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 .