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

Question

首先，我还没有任何代码，因为我想问的是实现此目标的最佳方法是什么。

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

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

这个想法是，在台式机上，图像在旋转时位于左侧，而在较窄的屏幕宽度上，图像则变平。

我考虑过使用以下方法:

CSS sprite + CSS 媒体查询:

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

CSS 转换？

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

jQuery 插件

我不知道是否有什么东西可以让我将其作为 jquery 插件实现，有什么建议吗？

视差.js

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

我希望我的问题足够清楚，再次抱歉没有代码，但这仍处于概念验证阶段。 请要求任何澄清。

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

Answer 1

您可以很容易地结合 css3 的一些漂亮属性来实现此功能:透视图、vw 单元和媒体查询。

参见 this Jsfiddle如需快速演示，请调整视口(viewport)大小以查看更改。

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