图形/画布/div 的动态更改

Question

我需要能够拥有某种画布，我可以在其中绘制 A 并将其动态地操作到 B 上。

• 所有直肠的尺寸必须具有适应性
• 红色矩形的倾斜
• 和整套的旋转

我不确定哪种方式是正确的。我尝试了使用 CSS3 转换的简单 HTML，如果没有广泛的 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>