动态更改图形/画布/ div

Question

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

• 所有直肠的大小必须适应
• 红色矩形的倾斜
• 和整套的旋转

我不确定哪条路是正确的。我尝试使用CSS3转换的简单HTML，并且在没有大量JS计算的情况下真的没有任何地方，因为我必须伪造变换3D中的红色矩形以获得预期的印象 - 然后需要＆＃34;伪造＆＃34; A和B的定位以他们应该的方式连接。

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

会感激一些意见。

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

Answer 1

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

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

悬停以查看转换

修改

另一个想法。不确定它是否适合你，但让我们试一试。无法使红色区域边框 - 仅限纯色。

＆＃13;

＆＃13;

// 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;