Отзывчивый дизайн - изменение поворота изображения в соответствии с медиа-запросами

Прежде всего, у меня пока нет кода, так как я спрашиваю, как лучше всего это сделать.Отзывчивый дизайн - изменение поворота изображения в соответствии с медиа-запросами

Я занимаюсь разработкой веб-сайт, который имеет изображение на левой стороне, которая имеет небольшое 3D вращение:

Sample image 1

То, что я хотел бы сделать, это изменить его взгляд на изменение ширины окна , пока она не походит на квартиру:

Sample image 2

идея заключается в том, что на рабочем столе ПК изображение находится на левой с поворотом, в то время как на более узкий экран ширины изображения повернута плоская.

Я рассмотрел, используя следующие методы:

CSS спрайтов + CSS медиа-запросы:

Я не совсем уверен, об использовании этого, так как в этом случае я думаю, что я не буду имеют своего рода «движущийся» эффект при изменении размера окна, если я не создаю медиа-запрос для каждых 5 пикселей и не создаю очень длинное изображение для резки

CSS-преобразование?

Не уверен, если это возможно, чтобы создать своего рода 3D-эффект к изображению, используя только CSS и измените значение 3D на окне изменения размера без использования упомянутого выше метода

Jquery Plugin

I не знаю, есть ли что-то, что позволяет мне достичь этого как плагин jquery, любое предложение?

Parallax.js

Я никогда не использовал параллакс, но швы, как вы можете перемещать элементы на экране в различных образом, как вы думаете, можно будет использовать параллакс для того, что мне нужно?

Надеюсь, мой вопрос достаточно ясен, извините за отсутствие кода, но это все еще в стадии разработки концепции. Просьба уточнения.

Спасибо и хорошо провести время.

источник

2015-05-15 Nick

для достижения фактического 3D-эффекта я бы определенно использовать CSS прообразы коробки (очень легко сделать) и изменить преобразование координат или сдвиг положения либо с помощью JS динамически или написать довольно много медиа-запросы - возможно, использовать относительные значения вместо создания запроса для каждых 5 пикселей – Alex

@Alex thansk для вашего предложения. – Nick

@ Ник не сделал ни единого удара, но эти парни правы. стек не для таких вопросов, прочитайте faq, прежде чем вы будете беспокоить людей. показать некоторые усилия, код что-то, получить помощь, почему он не работает. – Alex

Вы можете достичь этой функциональности, легко объединяя несколько отличных свойств 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" />

источник

2015-05-15 08:29:23 Nit

Отзывчивый дизайн - изменение поворота изображения в соответствии с медиа-запросами

ответ

Смежные вопросы