CSS преобразования элементов предложения

Question

Stackoverflow не разрешается размещать изображения из-за мне нужно 10 репутации, чтобы получить возможность отправлять tha'ts изображения, почему я отправил ссылку

я набросал свою идею, и я хочу, чтобы создать похожее на это.http://themesand.com/link.jpg

Не могли бы вы дать мне предложение. Я пытаюсь создать его с помощью CSS, например, написания кода, подобного этому.

сначала создать div class='main' и добавление div class='box' внутри main и писать CSS вращающийся box элементы

или есть какие-либо другие JS плагинов для достижения аналогичного эффекта?

Что вы можете предложить мне?

Answer 1

transform: rotate (45deg); будет делать трюк

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

Я сделал ручку с шероховатым решением: http://codepen.io/anon/pen/kwifj

Если вы хотите иметь некоторое содержание в этих коробках, вы должны повернуть его обратно. Другим решением будет некоторое абсолютное позиционирование и отображение текста над повернутыми элементами.

Answer 2

Вы можете сделать это с помощью CSS преобразования свойству

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

настроить ротацию градусов, чтобы соответствовать с вашим изображением и использовать ряд Див-х с количеством ящиков.