如何使用CSS/JS在背景上居中一个等轴测网格

Question

几个月前，我积极开始创建自己的基于HTML/JS的游戏，但由于遇到了一些更具挑战性的问题，进展完全停滞了。其中一个问题如下图所示：

我有这样一个div网格，它的transform属性为rotate(-45deg) skew(15deg, 15deg);，但我无法确定如何在各种屏幕尺寸上使其保持居中。

使用以下代码可以使背景图像相对中心：background-position: center;

background-size: cover;
background-position: 50% 50%;

我的问题是网格应该像背景图一样居中并粘附在它上面。

JSFiddle

- Jonathan

Answer 1

以下内容可以让它在最小宽度和高度为400像素的情况下居中显示：

#grid {
    position: absolute;
    width: 400px;
    height: 400px;
    /*the following 4 definitions will center any div that uses absolute positioning*/
    left: 50%;
    top: 50%;
    margin-top:-200px;/*1/2 of the height*/
    margin-left:-200px;/*1/2 of the width*/
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -ms-transform: rotate(-45deg) skew(15deg, 15deg);
    transform: rotate(-45deg) skew(15deg, 15deg);

  background-size: 100% 100%;*/
}

基本上，将div置于中心的技巧是使用负margin-left和margin-right，同时将宽度/高度的1/2分配给它们。

希望这可以帮助！

- dev7

---

是的，确实如此！感觉有点愚蠢忽略了这一点。现在我只需要想办法让网格在背景开始缩放时保持粘性。 - Jonathan

@Jonathan 这是一种在任何手册中都不会显示的 CSS 技巧... :) - dev7

当然，你是否知道如何用动态比例替换400px？ - Jonathan

@Jonathan，你想在HTML和网格之间保持什么比例？ - dev7

@Jonathan，不幸的是我没有时间去尝试它，你读过这篇文章吗 - http://24ways.org/2010/intro-to-css-3d-transforms/ - dev7