Мне нужно иметь какой-то холст, на котором я могу нарисовать A и динамически манипулировать им в направлении B. (Для A и B см. Пример рисования)
Я не уверен, что это правильный путь. Я попробовал простой HTML с CSS3-преобразованиями и не получил нигде без обширных JS-вычислений, так как мне пришлось бы подделывать преобразование красных прямоугольников в 3D, чтобы получить ожидаемое впечатление — что затем требует «искусственного» позиционирования для A и B, чтобы они соединялись друг с другом. они должны.
Есть другие идеи? Рисовать с помощью imagemagick и PHP? Манипуляция SVG? Я относительно открыт к подходу.
Был бы признателен за некоторый вклад.
Пример рисунка: http://www.steffen-behn.de/m3/reifen.jpg
Я думаю, что преобразования могут дать вам все, что нужно
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>
Других решений пока нет …