动态更改图形/画布/ div

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>

</div>