Dynamic alteration of graphic/canvas/divs - php

Question

I need to be able to have some kind of a canvas in which I can draw A and manipulate it dynamically towards B. (For A and B see example drawing)
The size of all rectacles must be adaptable
the skewing of the red rectangle
and the rotation of the whole set
I am unsure which is the right way to go. I tried simple HTML with CSS3 transformations and dont really get anywhere without extensive JS calculation since I would have to fake transform the red rectangles in 3D to get the expected impression - which then requires a "faked" positioning for A and B to connected they way they are supposed to.
Any other ideas? Draw it with imagemagick and PHP? SVG manipulation? I am relatively open towards the approach.
Would appreciate some input.
Example drawing: http://www.steffen-behn.de/m3/reifen.jpg

Answer 1

I think that transforms can give you everything that is needed
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>
Hover to see the transform
EDIT
Another idea. Not sure if it will suit you, but let's give it a try. Can not make the red zones border - only, only solid color.
// 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>