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

我需要能够有一个画布，在其中我可以画a，并朝B动态操作它。（a和B见示例图）

• 所有直肌的大小必须是可适应的
• 红色矩形的倾斜
• 还有整套的旋转

我不确定该走哪条路。我尝试了简单的HTML和CSS3转换，但如果没有大量的JS计算，我真的不会有任何进展，因为我必须在3D中对红色矩形进行假转换，以获得预期的效果-这需要a和B以他们应该的方式进行“假”定位

还有其他想法吗？用imagemagick和PHP绘制它？SVG操作？我对这一方法持相对开放的态度

希望您能提供一些意见

---

示例绘图：

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

div{
过渡：所有1；
}
.基地{
高度：200px；
宽度：100px；
边框：实心1px黑色；
左：50px；
顶部：100px；
位置：绝对位置；
透视图：100px；
}
.这边{
宽度：100%；
高度：50px；
边框：实心1px红色；
位置：绝对位置；
}
#侧面1{
底部：100%；
变换原点：底部中心；
}
#侧面2{
最高：100%；
变换原点：顶部中心；
}
.基地：悬停{
变换：缩放（1.2）旋转（20度）；
}
.基地：悬停在一边1{
变换：scaleY（1.1）rotateX（-20度）；
;
}
.基地：悬停#侧面2{
变换：scaleY（1.1）rotateX（20度）；
}

谢谢！这个解决方案的问题是，我不能简单地将其参数化。如果不计算新的位置和“旋转”，我无法设置矩形的宽度、高度和倾斜。我想能够设置红色矩形的上宽度和下宽度以及由此产生的倾斜，或者能够计算它。你能提供一个你想要的参数化的例子吗？你必须从什么值开始，最终结果是什么？基本上，我希望能够设置红色矩形的准确上宽度，下宽度应该正好等于黑色矩形。这将成为轮胎计算器的图形表示。基本上，黑色矩形代表轮辋，红色矩形代表轮胎。我已经成功地使用了手动编写的SVG，它可以通过PHP/CSS进行更改。到目前为止，这似乎是最简单的方法。我现在有了一个工作原型，其中包含一些简单的意大利面条PHP；）真的很酷的主意。边界甚至没有必要。如果你把它们拿出来，去掉所有的“-1px”，它实际上是非常直的方向！对我来说唯一的问题是，我还需要能够“倾斜”到负值。由于我没有恰当地描述这一点，我将接受你的回答——我真的很喜欢这种方法。负值示例：