CSS转换元素建议

CSS transform elements suggestion

本文关键字：元素 转换 CSS      更新时间：2023-09-26

Stackoverflow不允许发布图像，因为我需要10个代表才能发布图像，这就是我发布链接的原因

我勾画了我的想法，我想创作类似的作品http://themesand.com/link.jpg

你能给我建议吗。我试着用css创建它，比如写类似的代码。

首先创建div class='main'在main中添加div class='box'，并编写css旋转box元素

或者还有其他js插件可以达到类似的效果？

你能给我什么建议吗？

变换：旋转（45度）；将完成

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

我用一个粗略的解决方案制作了一支钢笔：http://codepen.io/anon/pen/kwifj

如果你想在这些盒子里放一些内容，你必须把它反过来。另一种解决方案是在旋转的元素上进行一些绝对定位和渲染文本。

您可以使用CSS转换属性

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

调整旋转角度以匹配您的图像，并使用div的数量和框的数量。

相关文章：