Responsive design - modify image rotation according to media queries

First of all, I don't have any code yet, as I'm asking what's the best way to achieve this.

I'm developing a website which has an image on the left hand side that has a slight 3D rotation:

What I'd like to do is change it's perspective on window width change, until it's like flat:

The idea is that on desktop PCs the image is on the left with the rotation, while on narrower screen widths the image is turned flat.

I've considered using the following methods:

CSS sprite + CSS media queries:

I'm not really convinced about using this, as in this way I think that I will not have a sort of "moving" effect when the window is resized, unless I create a media query for every 5px and create a very long image to cut

CSS transform?

Not sure if it's possible to create a sort of 3D effect to an image using only CSS and change the 3D value on window resize without using the above mentioned method

jQuery plugin

I don't know if there's something that allows my to achive this as jquery plugin, any suggestion?

Parallax.js

I've never used parallax, but it seams like you can move elements on the screen in various way, do you think it will be possible to use parallax for what I need?

I Hope my question is clear enough, sorry again for no code, but this is still in proof-of-concept stage. Please ask for any clarifications.

Thanks and have a good day.

You can achieve this functionality rather easily combining a few nifty properties of css3: perspective, the vw unit and media queries.

See this Jsfiddle for a quick demo, resize the viewport to see the changes.

body {
  -webkit-perspective: 250px;
  perspective: 250px;
  min-width: 500px;
}
@media (min-width: 500px) {
  body {
    background: blue;
    -webkit-perspective: 50vw;
    perspective: 50vw;
  }
}
@media (min-width: 700px) {
  body {
    background: red;
    -webkit-perspective: calc(500vw - 3150px);
    perspective: calc(500vw - 3150px);
  }
}
img {
  width: 400px;
  height: auto;
  transform-style: preserve-3d;
  transform: rotateY(1rad);
}

<img src="http://i.imgur.com/qY1SdO0.jpg" />