Как повернуть изображение с помощью решения на стороне клиента - PullRequest
Новая
       21

Как повернуть изображение с помощью решения на стороне клиента

3 голосов
/ 02 августа 2010

Мне интересно, есть ли способ динамического поворота изображения или инвертирования изображения с использованием решения на стороне клиента?Мне все равно, если это простой старый JavaScript, плагин JQuery, CSS.Мне просто интересно, есть ли какой-нибудь способ сделать это динамически на стороне клиента, вместо того, чтобы писать код на стороне сервера для каждого изображения, которое я могу сделать.ничего не найти.

РЕДАКТИРОВАТЬ: Я ищу решение, которое не требует ничего из HTML 5.

Ответы [ 3 ]

4 голосов
/ 02 августа 2010

Firefox, Safari и Opera поддерживают это: 

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

Вы также можете сделать это в IE8, может быть, даже 7 (?): 

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

повернуть элемент с помощью JS: 

var deg = 90
$('element').style.MozTransform = 'rotate(' + deg + 'deg)';
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';

редактирование:

вау, согласно http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx вращение работает для IE 5.5!

1 голос
/ 11 ноября 2011

Очень интересное решение javascript: http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ Представьте, что у вас есть какой-то магазин или блог, и вы дарите пользователю свои продукты.Решение позволяет сэкономить пространство и представить вид продукции в очень реалистичной форме с помощью скрипта.Это позволяет забыть о флэш-памяти (которая до сих пор поддерживается не всеми мобильными устройствами).Чтобы использовать его, необходимо:

  • Скачать бесплатный плагин (используйте ссылку выше)
  • Установить плагин, используя инструкции
  • Создать и добавить серию изображений длякаждый продукт (чем больше изображений, тем лучше эффект вращения вы получите)
  • Следите за повышенным интересом к вашим продуктам со стороны пользователей

Это действительно работает для меня.Протестировано на мобильных устройствах Android (LG p500), iPad и iPod touch.

0 голосов
/ 02 августа 2010

Вы можете сделать это, используя элемент canvas, как показано здесь . Я не уверен на 100%, что все браузеры уже поддерживают его. Это часть HTML5 (подробнее об этом в Wikipedia ), поэтому FF, Safari и Chrome поддерживают его Не уверен насчет IE8.

...