Поворот картинки

Поворот картинки

Рубрика « Картинки » | 7 комментариев

С помощью css немного повернём нужные картинки выборочно в право или влево.

Делается такой эффект достаточно просто, прописываем класс в файле css, который используем только для тех картинок, в параметрах которых будет указываться класс для наклона изображения.
Цифру можно сменить на свою, а при желании картинку можно даже перевернуть.

Поворот картинкиПоворот картинки
Если у вас в шаблоне имеется страница с пользовательским css редактором, идём туда. А если такого нет, тогда в файл style.css.

Вставляем в него такой код:

.img-turn-left {
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

.img-turn-right {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}

В пользовательском css редакторе у меня выглядит так:Пишем код в пользовательском css редактореВ файле удобнее поставить код в самом конце:Пишем код в редакторе

Теперь открываем статью для редактирования и выбираем картинку, которую хочется повернуть.

В параметрах картинки есть строка под названием CSS-класс изображения, вот туда и нужно вставить img-turn-left для наклона влево или img-turn-right, для поворота картинки вправо:Добавляем класс

 

Сайдбар))

7 комментариев к статье “Поворот картинки

  • Для нормальных современных браузеров плагин позволяет вращать не только картинки, но и другой обычный контент. Хотя красота отображения повернутых шрифтов в некоторых браузерах оставляет желать лучшего.

    Reply
  • Анжелика, это же просто чудо какое-то. Только вчера размышляла на тему «А как было бы хорошо попробовать наклонные картинки», а тут сразу такая статья. Все притягивается во Вселенной! Добавила в закладки.http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif Я кодов побаиваюсь, но как преодолею страх, сразу попробую.http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    Reply
    • Не бойтесь, Галина! Файл style.css не страшный, код в нём ставьте в любое место, и в любом порядке. Другое дело файл functions.php, вот с ним нужно осторожно, любой лишний или недостающий знак в коде может сайт погасить.
      А я люблю экспериментировать со стилями, сайты можно изменять до неузнаваемости! Если страх так и не преодолеете, давайте я поставлю код вам сама. ?

      Reply
  • Здравствуйте!
    Я, как то пионер — сказали сделать — сделала!!!!
    «Пьяная» фотка — просто нет слов, как здорово!
    Надо только подобрать фотки для данного эффекта, чтобы смотрелось гармонично, а то пейзаж выглядит малость странно.!!!
    Но то, что это работает — точно!!!!http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif

    Reply
    • Наталья, правда твоя статья с таким эффектом веселее смотрится?
      И всё делается просто!
      Можно ещё и анимацию на картинки наложить, но это уже в следующих статьяхhttp://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif.

      Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif