如何将一个div置于响应式旋转div的顶部？

Question

我试图使用以下设计：

但是，我在logo和涡旋方面遇到了麻烦，不知道如何添加它们。 我已经尝试过使用绝对定位，但在调整网站大小时，logo和涡旋的位置与图像方块不同。

我该如何添加涡旋和logo？

JSFiddle: http://jsfiddle.net/uHsJv/1/
如果您想要编辑JS Fiddle，在我的网站上的图片文件夹中，您可以找到以下图片：
- logo（images/logo.png或images/logogroot.png）
- 顶部两个包括logo的漩涡（images/boven.png）
- 底部两个漩涡（images/onder.png）
- 完整的“背景”（images/achtergrond.png）

当前HTML：

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

    <div class="box side left"><!-- Open .box -->
        <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->


    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="leftUp"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="leftDown"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box"><!-- Open .box -->
        <a class="boxInner innerMiddle"><!-- Open .boxInner -->
        <div class="overlay white"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="rightUp"><!-- Open .box -->
        <a href="#" class="boxInner innerRightUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="rightDown"><!-- Open .box -->
        <a href="#" class="boxInner innerRightDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box side right"><!-- Open .box -->
        <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

</div></div></div><!-- Close .wrap -->

当前CSS：

body {
    margin: 0;
    padding: 0;
    background-color:#1b1b1b;
}

.outer{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle{
    display: table-cell;
    vertical-align: middle;
}
.wrap {
    margin-left: auto;
    margin-right: auto; 
    height:100%;
    overflow: hidden;

    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;    
}

.box {
    float: left;
    position: relative;
    width: 24.45%;
    padding-bottom: 24.45%;

    margin:auto;

    top: 0; left: 0; bottom: 0; right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side {
    width: 17.57%;
    padding-bottom: 17.57%;
}

.left{
    left:3%;
}

.right{
    left:-3%;
}

.boxWrap{
    float: left;
    position: relative;
    width: 11.49%;

    margin:auto;
    padding:0;

    top: 0; left: 0; bottom: 0; right: 0;
}

.leftUp, .leftDown, .rightUp, .rightDown{
    width: 100%;
    padding-bottom:100%;
    position:relative;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.leftUp, .leftDown{
    margin-left:7%;
}

.rightUp, .rightDown{
    margin-left:-7%;
}

.leftDown, .rightDown{
    margin-top:38%;
}

.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;

    margin:0;
    padding:0;

    background-size:cover;
    background-repeat: no-repeat;
}

.innerLeft{
    background-image:url('../images/home_links.png');
}
.innerMiddle{
    background-image:url('../images/home_midden.png');
}
.innerRight{
    background-image:url('../images/home_rechts.png');
}

.innerLeftUp{
    background-image:url('../images/home_linksB.png');
}
.innerLeftDown{
    background-image:url('../images/home_linksO.png');
}
.innerRightUp{
    background-image:url('../images/home_rechtsB.png');
}
.innerRightDown{
    background-image:url('../images/home_rechtsO.png');
}

.overlay{
    height:100%;
    z-index:2;
    overflow:hidden;
    margin:0;
    padding:0;
}

.blue{
    background: rgba(0,101,147,0.40);
}

.blue:hover{
    background: rgba(185,185,185,0.40);
}

.hover:hover{
    background: rgba(245,245,245,0.40);
}

.blue:active, .hover:active{
    background: rgba(178,46,47,0.40);
}

- Lisa

Answer 1

我将装饰性图片放在中央.box元素内，并通过给它们相反的旋转，即rotate:-45deg，使它们变得直立。

这种方法的主要问题是元素围绕其中心旋转，而中心的位置取决于元素的宽度。在响应式设计中，这意味着中心的位置取决于页面宽度，即它可能会移动。

为了解决这个问题，我在图片周围放置了2个包装元素。外部包装器(.straight)的宽度为1%。这使得它足够窄，以至于它的宽度稍微变化时不会明显影响其内容的定位。然后，将此外部包装器旋转-45deg。

内部包装器(.straight div)的宽度为10,000%。这使得内部包装器的宽度等于.box元素的宽度(1%x10000%=100%)。然后可以将装饰性图像放置在此图像包装器中，并按照通常的方式进行大小调整、定位等。

我做了两次，一次是顶部图像，一次是底部图像。顶部图像的css在这里，底部图像的定位方式类似：

.straight{
  color:white;
  position:absolute;
  width:1%;
  height:1%;
  -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align:center;
}
.straight.top div{
  width:10000%;
  left:-5000%;
  top:-2000%;
  position:relative;
}

http://jsfiddle.net/John_C/8kFkR/

- John_C

---

这不完全是我要找的：无法将标志放在旋转的正方形顶部，即使使用百分比也不行。我可以用像素来处理，但那就不是响应式的了.. 请查看这个Fiddle：而且还有螺旋线，它们没有被添加在这里，我认为这些是最难添加的.. http://jsfiddle.net/7crwK/3/ - Lisa

你需要使用Math js对象的正弦、余弦和正切方法来管理它；但是，这并不是那么简单，你需要进行大量的数学计算... - Giacomo Paita