Responsive design - modify image rotation according to media queries

Question

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:

Sample image 1

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

Sample image 2

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.

to achieve an actual 3d effect i would definately use css transforms of a box (very easy to do) and change the transform origin or shift position either via js dynamically or write quite a few media queries - maybe use relative values instead of creating a query for every 5 pixel — Alex, May 15 '15 at 07:29
@Nick didnt downvote but those guys are right. stack is not for that kind of questions, read the faq before you harass people. show some effort, code something, get help why its not working. — Alex, May 15 '15 at 07:31
@JuannStrauss - This question wouldn't work very well over at Programmers because it is more about implementation than conceptual issues. — , May 15 '15 at 13:46

score 3 · Accepted Answer · answered May 15 '15 at 08:29

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" />

Responsive design - modify image rotation according to media queries

1 Answers1