If you rotate the image with HTML5, the edge will be jagged.

As with transform:rotate(); application to img and canvas, both are pixel operations, not vectors, so if fractions come out, the jagged will be visible, and the display ppi will affect it, so full control may be difficult.
If there are any of the above limitations and you want to devise them,

• Use border to create n pixels of edges and enclose them with vector lines
• Use box-shadow to generate a drop shadow and apply it to the side where the jug stands out
• Increase the number of samples by preparing an image twice the size to be displayed and using it as a 50% display by specifying the size

I think it would be good to try combining the surroundings.

Increase the image by one pixel, up, down, left, right, and right, with a transparent edge of one pixel width to eliminate jagged edges when rotated.

Does any browser have a jagi?
If it's Firefox, I think the following is helpful.

https://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-firefox

body{
  -moz-personal:800px;
}

div{
  -moz-transform:rotateX(45deg);
  border —1px solid white;
}

<div style="display:inline-block;width:10em;height:10em;background:hotpink;margin-left:8em;"></div>