Merge Design Images and Mask Images Using CSS.

Please refer to attached image [login to view URL] I need a simple web page with 2 sets of 10 image uploaders. One set of 10 uploaders will be used to upload design images. Each design image uploader should also have a text box that I can enter names for each one. The second set of 10 image uploader will be used to upload images that will be used as masks for the 10 design images. Each one of these image uploaders for the mask images should also have a name text box. The image uploaders for the mask images should also have associated text boxes to enter CSS values for position x, position x, scale x, scale y, skew x, skew y. refer to 'design images' folder for images that I will use for uploading the design images. refer to 'mask images' folder for images that I will use for uploading the mask images. for each mask image that I upload, take the matching uploaded design image with the same name, then apply the values associated with that mask that were entered in the text boxes using CSS. Then apply the mask image over the design image. Then do the same thing for all matching mask/design images and merge all layers into one image and dispay on the page. Refer to image [login to view URL] as an example of what the final image should look like. I will also need 1 more image uploader. This image will be used as the background layer of the final image. Refer to image [login to view URL] for an example of an image that I will use for this. the bounding box of the final image will be 1000 x 1000 px all the mask images will also be 1000 x 1000 px The sizes of the design images will vary. The design image will be positioned/resized/skewed using the CSS values entered for the matching mask within a 1000 x 1000 bounding box not all image uploaders will be used all the time. I think you can use CSS property transform: matrix() for all values. Here is a good example: [login to view URL]