图形/画布/div的动态变化

Question

我需要能够拥有某种画布，我可以在其中绘制 A 并将其动态地操纵到 B。（对于 A 和 B，请参见示例绘图）

• 所有矩形的尺寸都必须能适应
• 红色矩形的倾斜
• 和整个集合的旋转

我不确定哪条路是正确的。我尝试了简单的 HTML 和 CSS3 转换，如果没有大量的 JS 计算，我将无法真正到达任何地方，因为我必须伪造 3D 中的红色矩形以获得预期的印象 - 然后需要 A 和 B 的“伪造”定位以连接它们的方式他们应该这样做。

还有其他想法吗？用 imagemagick 和 PHP 绘制它？ SVG 操作？我对这种方法比较开放。

不胜感激。

示例图：http://www.steffen-behn.de/m3/reifen.jpg

Answer 1

我认为转换可以为您提供所需的一切

div {
    transition: all 1s;
}
.base {
    height: 200px;
    width: 100px;
  border: solid 1px black;
  left: 50px;
  top: 100px;
  position: absolute;
   perspective: 100px;
}

.side {
  width: 100%;
  height: 50px;
  border: solid 1px red;
  position: absolute;
  }

#side1 {
  bottom: 100%;
  transform-origin: bottom center;
}

#side2 {
  top: 100%;
  transform-origin: top center;
}

.base:hover {
  transform: scale(1.2) rotate(20deg);
  }

.base:hover #side1 {
  transform: scaleY(1.1) rotateX(-20deg);
;
}
.base:hover #side2 {
  transform: scaleY(1.1) rotateX(20deg);
}

<div class="base">
  <div class="side" id="side1"></div>
  <div class="side" id="side2"></div>
</div>

悬停查看变换

编辑

另一个想法。不确定它是否适合您，但让我们试一试。不能制作红色区域的边框 - 只有纯色。

// customize here
.base {
    width: 80px;
    height: 200px;
}
.side {
    height: 42px;
}
.side:after, .side:before {
    width: 10px;
}
// end of customization part


div {
    box-sizing: content-box;
}
.base {
    position: absolute;
    left: 40px;
    top: 100px;
    width: 80px;
    height: 200px;
    border: solid black 1px;
}



.side {
    width: 100%;
    border: solid 1px red;
    position: absolute;
    left: -1px;
    background-color: red;
}

#side1 {
    top: 100%;
}

#side2 {
    bottom: 100%;
}

.side:after, .side:before {
    content: "";
    position: absolute;
    height: 100%;
}

.side:before {
    right: 100%;
}
.side:after {
    left: 100%;
}

#side1:before {
    background: linear-gradient(to top left, red 50%, transparent 50%);
    border-bottom: solid red 1px;
}

#side1:after {
    background: linear-gradient(to top right, red 50%, transparent 50%);
    border-bottom: solid red 1px;
}

#side2:before {
    background: linear-gradient(to bottom left, red 50%, transparent 50%);
    border-top: solid red 1px;
    top: -1px;
}

#side2:after {
    background: linear-gradient(to bottom right, red 50%, transparent 50%);
    border-top: solid red 1px;
    top: -1px;
}

<div class="base">
<div class="side" id="side1"></div>
<div class="side" id="side2"></div>
</div>