CSS变换元素的建议

Question

＃2不允许为什么我张贴的链接

我勾勒出我的想法，我想创建一个类似于此张贴由于我需要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 */ 
} 

调整旋转度，以配合您的图像，并使用div的数量与箱数做。