2015-07-08 2 views
-1

Я пытаюсь создать изображение на сервере, состоящее из 12 разных изображений, распределенных по кругу (например, числа в часах: изображение, соответствующее номеру 6, должно быть вертикально перевернуто. Каждое новое изображение вращается на 30º), но я не могу найти правильный способ сделать это. Я попытался сделать композицию на стороне клиента (с целью ее загрузки) с помощью CSS и использовать html2canvas для создания нового изображения в base64, но он еще не поддерживает свойства «rotate» и «translate». Эксперименты, которые я сделал на сервере, до сих пор приводят к появлению кучи черных квадратов, содержащих часть повернутого изображения ... Изображения PNG, и у них нет альфы. Любые советы по этому вопросу?Php, вращать и вставлять миниатюры в круг

ответ

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

+0

К сожалению, я боюсь, что я объяснил себя очень плохо. Я не хочу, чтобы изображение было округлено, я хочу распространять 12 изображений по кругу, являясь каждым изображением, как цифры в часах. Этого можно достичь только в PHP, используя библиотеку GD, но я не знаю, как это сделать. Я пытался сделать это с помощью CSS и впоследствии преобразовать его с помощью html2canvas и отправить его на сервер как образ base64, но html2canvas не поддерживает поворот и перевод. – user997593

+0

Конечная цель - иметь изображение на сервере, состоящее из 12 маленьких изображений, распределенных по кругу ... – user997593

 Смежные вопросы

  • Нет связанных вопросов^_^