Question

我有一个jsfiddle，我正在here工作：https://jsfiddle.net/laroy/f9dhrrgg/

如您所见，我创建了一个3D列类型图像。我想复制它，并将复制移动到原件的右侧和顶部，以便它们重叠。我已经尝试过搞清楚但是还没有能力，所以任何帮助都会受到赞赏。

代码如下：

＆＃13;

.ultra {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: white;
  z-index: 1;
}

.sub_ultra {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
  margin-top: 5em;
  z-index: 1;
}

.right_side {
  height: 390px;
  width: 177px;
  overflow: hidden;
  background-color: yellow;
  margin-left: 10em;
  margin-top: -7em;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

.bottom_side {
  height: 380px;
  width: 142px;
  overflow: hidden;
  background-color: red;
  margin-left: 7.1em;
  margin-top: -6.8em;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

＆＃13;

<div class="ultra">
  <div class="sub_ultra"></div>
</div>

<div class="right_side"></div>
<div class="bottom_side"></div>

＆＃13;

Answer 1

这可以通过将图像包装在相对定位的容器中并使用jQuery clone创建另一个副本来轻松完成。

jQuery Fiddle

No jQuery Fiddle

HTML

<div class="container">
  <div class="image-wrap">
    <div class="ultra">
      <div class="sub_ultra"></div>
    </div>

    <div class="right_side"></div>
    <div class="bottom_side"></div>
  </div>
</div>

的jQuery

$(".image-wrap").clone().appendTo(".container").addClass("shifted")

Js（没有jQuery）

var node = document.querySelector(".image-wrap").cloneNode(true);
node.className = node.className + " shifted";
document.querySelector(".container").appendChild(node);

新Css

.container {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}
.shifted {
  position: absolute;
  top: -20px;
  right: -20px;
}

DIV绘图复制和优先级

1 个答案: