0

I'm currently working on a website where you can order a cup with an image printed on it. You can compose the shown image from a few options and based on the selected inputs, we create a preview of the image that will be printed. After all, this could look like this:

2-dimensional picture displayed in front of a cup

However, in real-life, the image wouldn't be flat, but it would follow the curvature of the cup. And look more like this:

enter image description here

Since the original image is composed of several layers of img-tags which are inside a div, I hoped that I could apply some CSS transformation on the div to "skew" the div to take this cylindrical shape. Unfortunately, I haven't found a good soluction yet, therefore asking all of you :)

Rounin
  • 27,134
  • 9
  • 83
  • 108
Lars Schellhas
  • 309
  • 2
  • 9
  • 2
    Hi. Welcome to SO. Please post the code you have and explain using it what you've tried and the problems you encountered. – Alexandre Elshobokshy Sep 11 '20 at 08:10
  • 2
    https://cssdeck.com/labs/wrap-image-in-3d-cylinder-2 Can't find a dupe in here though... There are a few for canvas, but I don't find one for CSS... – Kaiido Sep 11 '20 at 08:14
  • 2
    https://stackoverflow.com/questions/40997344/wrap-an-image-around-a-cylindrical-object-in-html5-javascript This maybe? Has a couple of promising answers. Needs canvas though, not doable with pure CSS. – Lionel Rowe Sep 11 '20 at 08:21
  • Thanks folks! There are really interesting ideas. I'll try them out and get back to you :) – Lars Schellhas Sep 19 '20 at 12:44

0 Answers0