The question is complicated and I believe the answer will be too. I can not explain very well what I would like to do (and I do not even know if there is any), that's exactly why I've put images to exemplify better. Well, assuming I have 9 DIV square dimensions, eg: 300px 300px. But I would like to give a degree of 45º in the DIV's , soon after I would also like the blocks to "complete", fitting the blocks in the possible places. It is possible? If so, how do you do it?
You can use the following code, not forgetting to use all three patterns so that there are no problems with other browsers:
elemento{
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
Then use "Position" to align them, for example:
Oops, my dear. I've never had this need, but quick research has shown that it is possible. I'll cite here examples I found and the source:
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
link Note: the library is on the download site (I do not know if it's possible for you to download and use it in your project, but it's an option)
{
...
$('.box').transition({ rotate: '45deg' });
...
}
link Note: This example shows how to use a click event trigger, I found it interesting, it might be useful.
As I said, I've never had any need, but I think some of these sources will solve your problem. If it solves, please let me know, because you never know when I will need to use it yourself, lol.