graphic/canvas/divs 的动态变化

Question

我需要能够有某种类型的 canvas，我可以在其中绘制 A 并动态地操纵它朝向 B。（对于 A 和 B，请参见示例图）

所有矩形的尺寸必须是自适应的
红色矩形的倾斜
和整套轮换

我不确定哪条路是正确的。我尝试了简单的 HTML 和 CSS3 转换，如果没有大量的 JS 计算，我真的无法取得任何进展，因为我必须伪造 3D 中的红色矩形转换以获得预期的印象 - 然后需要 "faked" 定位 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>

graphic/canvas/divs 的动态变化

Dynamic alteration of graphic/canvas/divs

php

css

svg

graphics

imagemagick