square div with 45º angle

Question

The question is complicated and I believe the answer will be as well. I do not know how to explain very well what I would like to do (and I don’t even know if there is a way), exactly why I put images to illustrate better. Well, suppose I’m 9 DIV of square dimensions, e.g. 300px 300px DIV's, soon after I would also like the blocks to be "completed", fitting the blocks in the possible places. Is that possible? If so, how do you do this?

Answer 1

You can use the following code, not forgetting to use the three standards so that there are no problems with the other browsers:

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

And then use "Position" to align, for example:

JSFIDDLE

Answer 2

Oops, my good man. I never had this need, but quick research has shown that it is possible. I will quote here examples I found and the source:

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/ Note: the library is on the site for download (I don’t know if it is possible for you to download and use in your project, but it is an option)

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

https://stackoverflow.com/questions/19126432/rotate-a-div-using-javascript Note: This example shows how to use a click event, I found interesting, can be useful.

As I said, I have never had to, but I believe that some of these sources will solve your problem. If you solve, please let me know, because you never know when I will need to use, rsrs.