CSS transform elements suggestion

Question

Stackoverflow not allowed to post image due to I need 10 rep to post image tha'ts why I posted link

I sketched my idea and I want to create similar to this. http://themesand.com/link.jpg

Could you give me suggestion. I try to create it with css such as writing code similar to this.

first creating div class='main' and adding div class='box' inside main and writing css rotating box elements

or there have any other js plugins to achieve similar effect?

What could you suggest me?

Answer 1

transform: rotate(45deg); will do the trick

.box {
  border:1px dashed black;
  width:100px;
  height:100px;
  position:relative;
  -webkit-transform:rotate(45deg);
  overflow:hidden;
}

I have made a pen with a rough solution: http://codepen.io/anon/pen/kwifj

If you wish to have some content in those boxes, you have to rotate it back. Another solution would be some absolute positioning and rendering text over the rotated elements.

Answer 2

You can do it using CSS transform property

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

adjust the rotate degrees to match with your image and use number of div's with number of boxes.