Динамическое изменение графики / холст / div

Question

Динамическое изменение графики / холст / div

Мне нужно иметь какой-то холст, на котором я могу нарисовать A и динамически манипулировать им в направлении B. (Для A и B см. Пример рисования)

Размер всех прямоугольников должен быть адаптируемым
перекос красного прямоугольника
и вращение всего набора

Я не уверен, что это правильный путь. Я попробовал простой HTML с CSS3-преобразованиями и не получил нигде без обширных JS-вычислений, так как мне пришлось бы подделывать преобразование красных прямоугольников в 3D, чтобы получить ожидаемое впечатление — что затем требует «искусственного» позиционирования для A и B, чтобы они соединялись друг с другом. они должны.

Есть другие идеи? Рисовать с помощью imagemagick и PHP? Манипуляция SVG? Я относительно открыт к подходу.

Был бы признателен за некоторый вклад.

Пример рисунка: http://www.steffen-behn.de/m3/reifen.jpg

1

css3 graphics imagemagick php svg

Решение

По вопросам рекламы [email protected]

Accepted Answer

Я думаю, что преобразования могут дать вам все, что нужно

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>

0

Другие решения

Других решений пока нет …

Источник