Я пытаюсь создать изображение на сервере, состоящее из 12 разных изображений, распределенных по кругу (например, числа в часах: изображение, соответствующее номеру 6, должно быть вертикально перевернуто. Каждое новое изображение вращается на 30º), но я не могу найти правильный способ сделать это. Я попытался сделать композицию на стороне клиента (с целью ее загрузки) с помощью CSS и использовать html2canvas для создания нового изображения в base64, но он еще не поддерживает свойства «rotate» и «translate». Эксперименты, которые я сделал на сервере, до сих пор приводят к появлению кучи черных квадратов, содержащих часть повернутого изображения ... Изображения PNG, и у них нет альфы. Любые советы по этому вопросу?Php, вращать и вставлять миниатюры в круг
-1
A
ответ
1
Попробуйте приведенный ниже код JS Fiddle
<img src="http://lorempixel.com/output/nature-q-c-100-100-9.jpg"/>
img{
border-radius:50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
Код любезность: https://stackoverflow.com/users/1811992/web-tiki
К сожалению, я боюсь, что я объяснил себя очень плохо. Я не хочу, чтобы изображение было округлено, я хочу распространять 12 изображений по кругу, являясь каждым изображением, как цифры в часах. Этого можно достичь только в PHP, используя библиотеку GD, но я не знаю, как это сделать. Я пытался сделать это с помощью CSS и впоследствии преобразовать его с помощью html2canvas и отправить его на сервер как образ base64, но html2canvas не поддерживает поворот и перевод. – user997593
Конечная цель - иметь изображение на сервере, состоящее из 12 маленьких изображений, распределенных по кругу ... – user997593