响应式设计 - 根据媒体查询修改图像旋转

Question

首先，我还没有任何代码，因为我问的是实现这一目标的最佳方式。

我正在开发一个网站，左侧有一个图像，有一个轻微的3D旋转：

我想做的是改变它对窗口宽度变化的看法，直到它变得平坦：

这个想法是在桌面PC上，图像在左侧旋转，而在较窄的屏幕宽度上，图像变平。

我考虑过使用以下方法：

CSS精灵+ CSS媒体查询：

我真的不相信使用它，因为我认为在调整窗口大小时我不会有一种“移动”效果，除非我为每个5px创建一个媒体查询并创建一个非常长图像切割

CSS转换？

不确定是否可以仅使用CSS为图像创建一种3D效果，并在不使用上述方法的情况下更改窗口调整大小的3D值

jQuery插件

我不知道是否有什么东西允许我将此作为jquery插件，任何建议？

Parallax.js

我从来没有使用过视差，但是接缝就像你可以用各种方式在屏幕上移动元素一样，你认为可以使用视差来满足我的需要吗？

我希望我的问题很清楚，对于没有代码再次抱歉，但这仍然是概念验证阶段。 请询问任何澄清。

谢谢你，祝你有个美好的一天。

Answer 1

您可以轻松地结合css3：perspective，vw单元和媒体查询的一些漂亮属性来实现此功能。

请参阅this Jsfiddle进行快速演示，调整视口大小以查看更改。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;