Html 以非网格方式定位图像

我正试图在一个网页上的位置图像在排序的“思想云”的效果，根据我下面的图片。这些最终将成为站点上其他页面的链接，并作为导航

到目前为止，我看到的是一个倒置的金字塔，中心图像如下所示。他们看起来还可以，但我希望他们在允许的范围内有更多的自由浮动的感觉，同时保持对决议的响应

非常感谢您对css/JavaScript解决方案的任何建议

.middle{
文本对齐：居中；
}
中间分区>a>img{
宽度：5%；
高度：自动；
利润率：1%；
显示：内联块；
}
div.middle>a>img:悬停{
-webkit转换：缩放（1.25）；/*Safari和Chrome*/
-moz变换：缩放（1.25）；/*Firefox*/
-ms变换：比例（1.25）；/*IE 9*/
-o变换：比例（1.25）；/*Opera*/
转换：比例（1.25）；
}
.底部{
文本对齐：居中；
位置：底部；
}

选项1-CSS

如果您想要一个不需要太多更改且不会使JavaScript复杂化的快速解决方案，也许您可以使用一些CSS来“增加”设计的趣味性：

• 通过不再对齐所有图像来打破网格外观：
  • 添加随机边距（使用百分比使其在不同大小中看起来相似）
  • 使用不同的垂直对齐（

    基线

    ，

    中间

    ，

    底部

    ，

    顶部

    …）
• 变换图像，使其不全部指向同一方向（请注意，除非您为

  ：hover

  添加特定值，否则鼠标悬停时将覆盖变换）：
  • 添加随机旋转（使用正值和负值）并使用不同的

    变换原点

    值
  • 不要限制旋转：

    倾斜

    ，

    平移

    ，

    缩放

• 尝试其他CSS属性和过滤器

它仍然是一个三角形，但现在它不再那么明显了。例如，这是一个建议：

.middle{
文本对齐：居中；
}
中间分区>a>img{
宽度：5%；
高度：自动；
利润率：1%；
显示：内联块；
}
中间a区：第n个（1）类img{
变换：旋转（-15度）；
保证金权利：-2%；
垂直对齐：基线；
}
中间a区：第n个第（2）类img{
变换：旋转（-15度）；
垂直对齐：中间对齐；
}
中间a区：第n个第（3）类img{
垂直对齐：底部对齐；
变换：旋转（15度）；
}
中间a区：第n个第（4）类img{
保证金权利：5%；
变换：倾斜（12度）；
}
中间a区：第n个第（5）类img{
变换：旋转（-33度）；
}
中间a区：第n个第（6）类img{
变换：旋转（33度）；
利润率最高：-30%；
}
div.middle>a>img:悬停{
-webkit转换：缩放（1.25）；/*Safari和Chrome*/
-moz变换：缩放（1.25）；/*Firefox*/
-ms变换：比例（1.25）；/*IE 9*/
-o变换：比例（1.25）；/*Opera*/
转换：比例（1.25）；
}
.底部{
文本对齐：居中；
位置：底部；
}

非常感谢您的回答，我认为CSS本身就可以做到这一点。然而，当我将CSS复制到Wordpress站点时，它似乎不起作用。知道为什么吗？上面的解决方案是特定于代码的，可能有些变化。你能分享失败的代码吗？或者一个URL来查看它？失败的代码与您上面发布的代码完全相同，除了WordPress，它在任何地方都有效。URL是www.iancolenutt.com每张图片后面都有一个

（因此它们将显示为垂直线，而不是三角形）。此外，在一些样式中还有一个

！重要信息

，用于覆盖图像的特定样式。我也不知道它们出现的确切原因，但您可以通过添加以下样式来消除它们：

。中间a{color:transparent；}

（然后这些行将是透明的，不可见的）