-1

I'm trying to create an image in the server, composed of 12 different images distributed in a circle (like the numbers in a clock: image corresponding to number 6 should be vertically flipped. Every new image rotates 30º), but I can't find the proper way to do so. I have tried to do the composition client-side (with the aim to upload it) with CSS and using html2canvas to create a new image in base64, but it doesn't support the 'rotate', and 'translate' properties yet. The experiments I've done in the server, so far, they result in a bunch of black squares that contain a portion of the rotated image... Images are PNG and they have no alpha. Any advice on this?

user997593
  • 423
  • 5
  • 16

1 Answers1

1

Try the below code 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);
}

Code courtesy : https://stackoverflow.com/users/1811992/web-tiki

Community
  • 1
  • 1
Tismon Varghese
  • 849
  • 1
  • 6
  • 17
  • Sorry, I'm afraid I have explained myself pretty bad. I don't want to make an image rounded, I want to distribute 12 images in a circle, being each image like the numbers in a clock. This can only be achieved in PHP by using GD library, but I don't know how to do it exactly. I was trying to do it with CSS and transform it afterwards with html2canvas and send it to server as base64 image, but html2canvas doesn't support rotate and translate. – user997593 Jul 08 '15 at 10:42
  • The final goal is to have an image in the server composed of 12 little images distributed in a circle... – user997593 Jul 08 '15 at 10:48