Php，旋转并粘贴圆圈中的缩略图

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?

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