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

Question

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

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

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

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

我考虑过使用以下方法：

CSS精灵+CSS媒体查询：

我不太相信使用它，因为这样我认为当 window 调整大小时我不会有某种 "moving" 效果，除非我创建一个媒体查询每 5px 并创建一个非常长的图像来剪切

CSS变换?

不确定是否可以仅使用 CSS 并在 window 调整大小时更改 3D 值而不使用上述方法

来为图像创建某种 3D 效果

jQuery插件

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

Parallax.js

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

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

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

Answer 1

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

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

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

javascript

css

jquery

parallax.js