1

A pergunta é complicada e creio que a resposta também será. Eu não sei explicar muito bem o que eu gostaria de fazer (e na verdade nem sei se tem como), exatamente por isso coloquei imagens pra exemplificar melhor. Bom, supondo que eu tenha 9 DIV de dimensões quadradas, ex: 300px 300px. Porém eu gostaria de dar um grau de 45º nas DIV's, logo apos eu gostaria também que os blocos se "completasse", encaixando os blocos nos lugares possíveis. Isso é possível? Se sim, como se faz isso?

DIV comum sem edição

DIV com o grau de 45

DIV encaixando nos lugares possiveis

3
  • A última ilustração tem 10 divs. Afinal, são 9 ou 10?
    – bfavaretto
    8/10/2014 às 1:26
  • Sim. Possível..
    – HiHello
    8/10/2014 às 1:38
  • @bfavaretto a ultima ilustração coloquei 10 só por colocar mesmo... 8/10/2014 às 23:39

2 Respostas 2

3

Você pode usar o seguinte código, não esquecendo de utilizar os três padrões para que não ocorra problemas com os outros navegadores:

elemento{
 transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

E depois utilizar o "Position" para que fiquem alinhados, exemplo:

JSFIDDLE

0

Opa meu caro. Nunca tive essa necessidade, porém uma rápida pesquisa mostrou que é possível. Citarei aqui exemplos que encontrei e a fonte:

http://www.w3schools.com/css/css3_2dtransforms.asp

div {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
}

http://ricostacruz.com/jquery.transit/ Obs: a biblioteca está no site para download(não sei se é possivel para você baixar e utilizar em seu projeto, mas é uma opção)

{
...
$('.box').transition({ rotate: '45deg' });
...
}

https://stackoverflow.com/questions/19126432/rotate-a-div-using-javascript Obs: Este exemplo mostra como utilizar no disparo de um evento click, eu achei interessante, pode lhe ser útil.

Como disse, nunca tive necessidade, porém, creio que alguma dessas fontes resolva seu problema. Se resolver, por favor me avise, pois nunca se sabe quando eu mesmo precisarei utilizar, rsrs.

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 .