Как повернуть фото на компьютере
Содержание:
- Как перевернуть фото до загрузки в ОК
- Видео онлайн конвертер
- Поворачиваем экран обратно, через настройки графики
- Как повернуть фото в Одноклассниках
- На компьютере
- 5 сторонних программы для поворота видео на 90 градусов и сохранения положения
- Учимся пользоваться программой VirtualDub
- Видео онлайн конвертер
- Поворачиваем экран обратно, через настройки графики
- Paint
- Переворачиваем фото ВКонтакте
- Почему возникает такая проблема
- Как повернуть элемент страницы сайта
Как перевернуть фото до загрузки в ОК
Чтобы при загрузке и после нее не волноваться о внешнем виде выложенных снимков, поворот лучше выполнять перед выкладыванием в сеть. Выполнить задуманное можно с помощью стандартных программ Windows. Загружать стороннее ПО не потребуется.
Поворот изображения в Paint
Чтобы произвести разворот картинки в этой программе необходимо:
Указать место сохранения и имя файла. Чтобы не делать копий, можно заменить оригинал.
Поворот изображения в редакторе Windows
Действовать нужно так:
Подведем итоги. Перевернуть картинку получится как с помощью стандартных средств социальной сети, так и через встроенные программы операционной системы. В первом случае пользователи увидят не редактированное изображение. При использовании программ, снимок будет загружаться в сеть сразу в правильном виде.
Видео онлайн конвертер
Большую пользу в работе с отснятым материалом принесет видео онлайн конвертер. Этот инструмент позволит осуществить достаточно много изменений в видео.
- Один из наиболее используемых ресурсов для онлайн конвертирования видео в необходимый вам формат, с наличием возможности поворота видео при конвертации можно считать video.online-convert.com.
- Чтобы воспользоваться функциями данного ресурса нужно зайти на сайт, выбрать итоговый формат конвертации вашего ролика, а потом, перейдя в раздел выбора опций, кликнуть на «Обзор».
- У вас появится возможность загружать свой ролик с жёсткого диска. Кроме этого, есть возможность внедрить в ресурс ссылку на файл в сети.
- После этого, у вас появится возможность изменить другие настройки вашего видео. Битрейт, параметры экрана, подбор кадров и так далее – изменение всех этих параметров возможно с использованием данного конвертера. Также можно легко изменять параметр «rotate video» (вращать видео), где есть возможность выбора угла вращения видео по направлению часовой стрелки (90 градусов, 180 и 270). После выбора нужного градуса нужно перейти в опции «Преобразовать файл» и немного выждать. После трансформации видео можно сохранить файл на диск, и получить ваше видео уже в перевёрнутом состоянии.
Вышеперечисленные способы являются самыми доступными и простыми для того, чтобы повернуть видео в вк.
Поворачиваем экран обратно, через настройки графики
Если все описанные способы не помогают и сбой произошел на программном уровне, можно попробовать сделать поворот экрана, через настройки графического адаптера. Последовательность действий будет зависеть от вашего устройства и модели установленной видеокарты.
Определимся с видом графического адаптера:
- Графика Intel – для ноутбуков и персональных компьютеров без дискретной видеокарты;
- Графика Nvidia – для ПК с установленной видеокартой от этой компании, а также ноутбуки с указанным видеоадаптером и подключенным внешним дисплеем;
- Графика AMD — для ПК с графическим процессором от AMD и ноутбуки с подключенным внешним дисплеем.
Параметры графики Intel
Этот способ в основном, подходит для владельцев мобильных ПК – ноутбуков и нетбуков, так как дисплей работает на основе графики интегрированной в процессор устройства. Название и внешний вид окна настроек может различаться, в зависимости от модели процессора.
Как повернуть фото в Одноклассниках
Как повернуть фото в Одноклассниках |
На днях у меня возникло желание добавить несколько фотографий на свою страничку в «Одноклассниках».
Для меня это стало полной неожиданностью, так как я точно помню, что ещё год назад редактор «Одноклассников» позволял переворачивать изображения, экспериментировать с их цветом и применять различные фильтры. Теперь же, когда такой возможности у «Одноклассников» нет, фото нужно повернуть заранее при помощи специальных программ (графических редакторов) или специальных возможностей операционной системы — просмотрщика Windows.
Графические редакторы, которые можно использовать для поворота фотографий.
1. Просмотр фотографий Windows – наиболее простой способ, позволяющий повернуть фотографию. Программа «Просмотр фотографий Windows» – часть Windows, достаточно два раза щёлкнуть левой клавишей мышки по иконке фотографии, и перед нами появится главное окно.
Если фотографии просматриваются другим редактором: — подведите курсор к фотографии; — кликнете правой кнопокой мыши; — в контекстном меню выберите «Открыть с помощью / Просмотр фотографий Windows»
Окно программы и кнопки поворота
(Рисунок 1)
Поворачиваем фотографию с помощью кнопки «Поворот» и нажимаем на кнопку «Следующее изображение», чтобы сохранить изменения. При закрывании программы изменения так же сохраняются автоматически.
Вот как выглядит фотография после поворота.
Вид фотографии в папке после поворота
(Рисунок 2) В случае, если качество фотографии от поворота может ухудшиться, просмотрщик предупредит об этом.
2. Adobe Photoshop – подойдёт и для опытных пользователей, и для чайников. Программа многофункциональна, для профессиональной работы потребует определённых знаний и навыков. Но повернуть фотографию с помощью Adobe Photoshop несложно. Для этого устанавливаем русифицированную версию программы в компьютер.
Затем открываем нужную фотографию одним из возможных способов: — запускаем Adobe Photoshop, затем выбираем Файл/Открыть; — левой кнопкой мыши по иконке фотографии открываем меню и находим Открыть с помощью Adobe Photoshop.
Интерфейс вашей версии программы может отличаться от моего, но наша задача – повернуть и сохранить фото, поэтому делаем следующее: В верхнем горизонтальном меню находим Изображение/Повернуть холст/ на …градусов.
Поворот фотографии в Фотошоп
(Рисунок 3)
Далее открываем Файл/Сохранить как, указываем место сохранения, имя файла и его тип (нам нужен JPEG).
3. XnView – ещё один интересный графический редактор, который позволяет прямо из главного окна выполнять множество действий, в том числе и поворачивать фотографии. Программа бесплатна для личного пользования, многоязычна (язык выбирается автоматически при установке), занимает около 14 Мб. Скачиваем её из Интернета, устанавливаем и запускаем. Главное окно выглядит так: слева вертикальное дерево каталогов, вверху – горизонтальное меню, ниже которого отображаются иконки фотографий. Если левым щелчком мыши выделить какую-нибудь иконку, фото появится в центре экрана. Его размер можно изменять колёсиком мышки, а поворачивать при помощи красных стрелок в левом верхнем углу горизонтального меню. Удерживая клавиши Ctrl или Shift, можно выбрать и повернуть сразу несколько фотографий. Сохранить изображение можно при помощи кнопки на верхней горизонтальной панели «Файловые операции» (папка со стрелочкой) или сочетания горячих клавиш Alt+C.
Как видите, способов, как повернуть фото в Одноклассниках много. Осталось выбрать тот, который понравился больше.
На компьютере
Повернуть видео можно прямо в программе для просмотра – в медиа проигрывателе. Обычно таких программ установлено несколько. Чтобы посмотреть, какие плееры есть на ПК, щелкните по ролику правой кнопкой мыши и наведите курсор на пункт «Открыть с помощью».
Также можно зайти в меню Пуск и посмотреть плееры в списке программ.
Далее я покажу, как перевернуть видео в популярных проигрывателях. Это бесплатные программы, каждую из них можно скачать с официального сайта и установить на компьютер.
Media Player Classic
Во время воспроизведения нажмите и удерживайте клавишу Alt и одну из цифр на цифровой части (Numpad). Таким образом вы сможете развернуть кадры в правильное положение.
Если при нажатии ничего не меняется, проверьте, включена ли цифровая часть клавиатуры. Для ее включения/отключения достаточно один раз нажать клавишу Num Lock.
Также проверьте настройки плеера. Для этого щелкните по пункту «Вид» в верхнем меню и выберите «Настройки».
На вкладке «Воспроизведение» откройте «Вывод». Убедитесь, что галочка «Вращение» активна. В ином случае попробуйте изменить кодек в переключателе «Видео DirectShow».
VLC
1. В меню «Инструменты» откройте «Эффекты и фильтры».
2. Щелкните по меню «Видеоэффекты» и перейдите на вкладку «Геометрия».
3. Активируйте галочку «Поворот» и выберите градус разворота.
4. Закройте окно, и продолжите просмотр в нормальном режиме.
KMPlayer
Во время воспроизведения щелкните по изображению правой кнопкой мыши. В контекстном меню перейдите в «Видео (Основное)» — «Поворот экрана (CCW)» и выберите нужное значение.
Windows Media Player (Кино и ТВ)
В системе Windows 10 предустановлены две программы для воспроизведения видео: «Кино и ТВ» и «Windows Media Player». Функции поворота в них нет, но его можно выполнить через настройку экрана.
1. Запустите воспроизведение файла. Сверните плеер.
2. Щелкните правой кнопкой мыши по свободной области рабочего стола и из списка выберите «Параметры Экрана».
Далее потребуется выполнить разворот экрана Windows, что в свою очередь перевернет весь внешний вид системы. После просмотра ролика не забудьте вернуть всё как было.
3. Щелкните на переключатель «Ориентация» и выберите одну из позиций.
Экран перевернется, а вместе с ним и видео в проигрывателе.
На заметку. Дополнительно на встроенных видеоадаптерах «Intel HD Graphics» функция разворота доступна переключением быстрых клавиш Ctrl + Alt и нужная стрелка.
Киностудия Windows Live
Если на вашем компьютере есть программа Киностудия Windows Live (Movie Maker), то через нее можно легко и быстро выполнить разворот.
К сожалению, она больше не поддерживается – её нельзя загрузить с официального сайта. Но при желании можно скачать на сторонних ресурсах.
1. Прямо в открытом меню Пуск напечатайте Movie Maker и запустите приложение.
2. Перетяните файл в окно программы.
3. Через кнопки в верхнем меню (вкладка «Главная») настройте правильное расположение кадров.
4. Для применения изменений и сохранения нового файла нажмите на кнопку «Сохранить Фильм».
OpenShot
На мой взгляд, одна из самых удобных программ, в которой разобраться новичку не составит труда.
1. Перетяните файл в главное окно.
2. Переместите загруженный ролик на монтажную панель.
3. Щелкните по клипу правой кнопкой мыши, в меню наведите на пункт «Вращение» и выберите нужный градус.
4. Кликните по кнопке «Экспортировать видео» и сохраните новый файл.
Shotcut
Кроссплатформенный редактор Shotcut работает на системах Windows, Linux и Mac OS. Имеет большой функционал для редактирования, включая фильтр для поворота.
1. Добавьте клип в главное окно программы.
2. Перетяните файл на монтажную панель. Нажмите на кнопку «Фильтры» и щелкните по значку +.
3. Найдите и кликните в списке по фильтру «Поворот и масштаб».
4. Задайте нужный градус в поле «Вращение».
5. Нажмите на кнопку «Экспорт» и сохраните готовый ролик на компьютер.
Avidemux
Неплохая программа для редактирования, но требует от пользователя определенных навыков по работе с видео.
1. Загрузите ролик в главное окно.
2. Установите кодек для сжатия, например, x264. Щелкните по кнопке «Фильтры».
3. В фильтрах нажмите на «Повернуть» и задайте градус. Затем закройте окно фильтров.
4. Выберите кодек для аудио дорожки и назначьте расширение для выходного файла.
5. Нажмите на кнопку «Сохранить видео». Во время создания нового файла к нему применится фильтр, и ролик будет проигрываться в выбранном направлении.
5 сторонних программы для поворота видео на 90 градусов и сохранения положения
Название | Описание | Ссылка |
---|---|---|
Movavi Video Editor | Программа содержит много полнофункциональных опций для удобного редактирования, а также обладает функцией захвата экрана рабочего стола. Русский простой интерфейс и понятный даже неопытному пользователю. Обрезать, конвертировать и произвести поворот видео на 90° — всё это и не только, вы можете сделать сами в этой лёгкой программе. | https://www.movavi.ru |
Freemake Video Converter | Программная среда изначально была «заточена» для конвертирования видео в другой формат, но со временем разработчики увеличили её функциональные возможности, в том числе и добавили поворот на 90°. В приложении можно настроить горячие клавиши для удобной работы в дальнейшем с вставляемыми видео и музыкой | http://www.freemake.com |
Windows Live | Киноредактор от компании Microsoft отличается от других приложений стабильной работой с видео и низкими затратами системных ресурсов. Идеальный вариант для монтажа домашнего видео. Большой набор опций с инструментами даёт пользователю широкие возможности в редактировании не только видео, но и музыкальных файлов. Есть удобная поддержка импорта с внешних устройств и сохранения на них же переработанного материала. | https://www.microsoft.com/ru-ru/p/Киностудия/9wzdncrfj3md?activetab=pivot:overviewtab |
ВидеоМАСТЕР | Универсальное приложение с русским интерфейсом поддерживает популярны мультимедийные форматы. Простой удобный функционал приспособлен для обработки видео, конвертации, накладыванию эффектов, после чего предлагает разместить видео файл в интернете | http://video-converter.ru |
WW VideoRotator | Самое простое приложение для поворота видео на 90 градусов. Использует минимальные системные требования ПК. С меню и настройками справиться даже неопытный пользователь. Программа поддерживает большую часть форматов и работает в фоновым режимом, обрабатывая за раз по несколько файлов | http://www.wavware.com/index.php?WWlang=ru&WHAT=6 |
Поворот в программе Movavi Video Editor
Скачайте редактор и установите к себе на компьютер. В будущем он вам пригодится не только для поворота на 90 градусов, но и для конвертирования файлов, обрезки видео, накладывания спецэффектов и т.д. Процесс установки не займёт много времени.
-
Запустите ярлык программы и добавьте свой видео файл через меню «Добавить файлы».
-
Загруженный файл появится на трековой дорожке и теперь на панели инструментов нажмите на вращательную стрелочку. Она будет поворачивать видео по часовой стрелке.
Если захотите отменить действие, нажмите на стрелку в левой части панели инструментов.
-
Далее жмите на верхней панели вкладку «Сохранение» и для того чтобы файл загрузился на компьютер, выберите верхний вариант — «Сохранить видео».
Также один из вариантов сохранения перевёрнутого видео возможен прямо на канал популярного сервиса YouTube.
-
При желании вы можете сохранить видео с другим разрешением если откроете меню настроек, но в целом оставляйте всё так, как и есть, подтверждая своё решение кнопкой «Старт».
Учимся пользоваться программой VirtualDub
Как уже было отмечено выше, это бесплатный софт, который позволяет работать с видео. Несмотря на то что интерфейс на английском языке, трудностей возникнуть не должно, так как всё выполняется буквально в несколько кликов. Как всегда, нужно добавить сначала видео. После этого выбираем вкладку «Video». Там вы увидите несколько строк, нам нужна под названием «Filtres». Также можно воспользоваться горячими клавишами: в главном меню программы нажимаете Ctrl+F. Вы увидите окно, в котором нужно выбрать «Добавить», то есть «Add». После этого кликаем на «rotate», а затем «ок». Вот и всё, остаётся выбрать угол поворота (90, 180 или 270 градусов). Сохраняете результат и наслаждаетесь просмотром.
Видео онлайн конвертер
Большую пользу в работе с отснятым материалом принесет видео онлайн конвертер. Этот инструмент позволит осуществить достаточно много изменений в видео.
- Один из наиболее используемых ресурсов для онлайн конвертирования видео в необходимый вам формат, с наличием возможности поворота видео при конвертации можно считать video.online-convert.com.
- Чтобы воспользоваться функциями данного ресурса нужно зайти на сайт, выбрать итоговый формат конвертации вашего ролика, а потом, перейдя в раздел выбора опций, кликнуть на «Обзор».
- У вас появится возможность загружать свой ролик с жёсткого диска. Кроме этого, есть возможность внедрить в ресурс ссылку на файл в сети.
- После этого, у вас появится возможность изменить другие настройки вашего видео. Битрейт, параметры экрана, подбор кадров и так далее – изменение всех этих параметров возможно с использованием данного конвертера. Также можно легко изменять параметр «rotate video» (вращать видео), где есть возможность выбора угла вращения видео по направлению часовой стрелки (90 градусов, 180 и 270). После выбора нужного градуса нужно перейти в опции «Преобразовать файл» и немного выждать. После трансформации видео можно сохранить файл на диск, и получить ваше видео уже в перевёрнутом состоянии.
Вышеперечисленные способы являются самыми доступными и простыми для того, чтобы повернуть видео в вк.
Поворачиваем экран обратно, через настройки графики
Если все описанные способы не помогают и сбой произошел на программном уровне, можно попробовать сделать поворот экрана, через настройки графического адаптера. Последовательность действий будет зависеть от вашего устройства и модели установленной видеокарты.
Определимся с видом графического адаптера:
- Графика Intel – для ноутбуков и персональных компьютеров без дискретной видеокарты;
- Графика Nvidia – для ПК с установленной видеокартой от этой компании, а также ноутбуки с указанным видеоадаптером и подключенным внешним дисплеем;
- Графика AMD — для ПК с графическим процессором от AMD и ноутбуки с подключенным внешним дисплеем.
Параметры графики Intel
Этот способ в основном, подходит для владельцев мобильных ПК – ноутбуков и нетбуков, так как дисплей работает на основе графики интегрированной в процессор устройства. Название и внешний вид окна настроек может различаться, в зависимости от модели процессора.
1. На пустом месте рабочего стола, сделайте клик правой кнопкой мыши и в контекстном меню нажмите «Параметры графики» — «Поворот» — и необходимы угол поворота.
2. Если указанный пункт отсутствует, перейдите в «Графические характеристики».
3. В окне панели управления HD графикой отметьте необходимый угол поворота.
Не забудьте применить изменения, перезагрузка устройства не потребуется.
Видеокарты от Nvidia и AMD
Данный способ поможет обладателям персональных компьютеров и мобильных ПК с подключенным через порт HDMI, внешним монитором. Все операции будут проводиться из панели управления видеокартой и не забудьте предварительно обновить драйвера.
- Щелкните правой кнопкой мыши на пустом месте рабочего стола и в контекстном меню, в зависимости от производителя видеокарты, откройте «AMD VISION Engine Control Center» или «Панель управления Nvidia».
- В меню, найдите вкладку «Дисплей» и откройте пункт «Поворот дисплея».
- Осталось вернуть ваш монитор в нормальное положение выбрав необходимый угол поворота.
Paint
Итак, переворачивать фотографию мы будем с помощью стандартного графического редактора. Называется он Paint. Этот инструмент присутствует на всех актуальных операционных системах Windows, поэтому вам не потребуется его загружать из интернета. Первым делом вам необходимо открыть графический редактор, далее добавить в него снимок, который вы желаете перевернуть. После этого выбираем особый инструмент под названием «Выделить» и делаем всего один клик по изображению. Если все было совершено правильно, тогда перед вами должно появиться всплывающее меню, где следует выбрать пункт «Перевернуть». Теперь от вас требуется выбрать только правильное направление.
Итак, вы знаете, как перевернуть фото в «Одноклассниках», при этом процесс работы с графическим редактором не требует большого количества времени. Все делается в несколько кликов. После того как снимок был перевернут в нужном формате, вам обязательно необходимо его сохранить, в противном случае все ваши старания будут попросту напрасны.
Переворачиваем фото ВКонтакте
В обоих далее рассматриваемых вариантах вы можете перевернуть совершенно любое изображение, будь то фотография или нарисованная картинка. При этом исключениями являются стикеры, граффити и файлы, добавленные другими пользователями.
Способ 1: Сторонние средства
Данный метод подойдет вам в том случае, если необходимость поворота фото возникла до загрузки на сайт соцсети или при возможности его удаления с последующей загрузкой отредактированной копии. В этом случае к числу преимуществ можно отнести вариативность средств и отсутствие ограничений на угол поворота картинки.
Онлайн-сервисы
Примечание: Некоторые ресурсы позволяют выполнить загрузку готового файла напрямую ВК без скачивания на компьютер.
Графические редакторы
Подробнее: Как повернуть и перевернуть фото в Photoshop
Так как Фотошоп является платной программой и использовать его не всегда удобно, можно прибегнуть к стандартным средствам ОС Windows. Для этого кликните правой кнопкой мыши по картинке и выберите вариант «Повернуть» в зависимости от нужного угла.
Аналогичные функции предоставляет базовые графический редактор Paint, интегрированный в Виндовс. Это относится как к стандартной версии, так и приложению Paint 3D.
На просторах сети также существует множество графических редакторов, позволяющих добиться требуемого результата
Большее внимание следует уделить сервису Avatan, так как он отличается высокой производительностью и простотой в использовании
В результате вы получите измененное изображение, которое впоследствии придется вручную загрузить во ВКонтакте.
Способ 2: Стандартные средства
Во ВКонтакте имеется два связанных между собой варианта поворота фото, которое было добавлено или сохранено вами. Фотографии сторонних пользователей описанными методами изменить невозможно. При этом угол поворота строго ограничен 90 градусами.
- Откройте сайт соцсети и перейдите к фотографии, которую нужно повернуть. Изображение может располагаться как на вашей странице, так и в сообществе.
Выбрав картинку, наведите курсор мыши на ссылку «Еще» на нижней панели инструментов. Узнать о возможности изменения можно благодаря функции «Удалить», недоступной при просмотре чужого изображения.
Кликните по одной из строк «Повернуть» в соответствии с вашими требованиями. После этого фотография будете перевернута на 90 градусов в ту или иную сторону.
Для доступа к дополнительному способу поворота изображения из того же списка «Еще» выберите «Фоторедактор».
На панели инструментов в левой части экрана нажмите кнопку «Повернуть», чтобы развернуть картинку на 90 градусов в фиксированную сторону. Для поворота на 180 и более градусов потребуется повторить описанные действия.
Завершив процедуру редактирования, нажмите кнопку «Сохранить».
На этом мы завершаем инструкцию и надеемся, у вас получилось нужным образом отредактировать фото.
Почему возникает такая проблема
Дело в том, что записывающее устройство может неверно располагаться, что и приводит к появлению перевёрнутой картинки. Понятно, что если вы расположите камеру не так, как нужно, снимать она всё равно будет, однако результат получится совсем не такой, как вы ожидали. Но это еще далеко не все. Иногда всему виной — операционная система и «битый» реестр. Если вы постоянно работаете с видео, то наверняка знаете, что такая проблема может возникать после кодирования или декодирования файла. В частности из-за того, что случались различного рода сбои в процессе
Стоит обратить внимание на то, что большая часть современных плееров, которые имеют возможность воспроизводить видео различных форматов, оснащены функцией, позволяющей выполнять поворот с шагом в 90 градусов. Некоторые из этих программ работают автоматически, то есть делают всю нужную работу вместо вас
Но пока что такого рода софт встречается достаточно редко.
Как повернуть элемент страницы сайта
- Как повернуть элемент страницы сайта
- Как повернуть текст на 90 градусов
- Как сделать горизонтальный лист в ворде
- Как повернуть фото
Четыре фотографии шириной до 450px;
Данный пример будет посвящен созданию страницы стильного альбома с повернутыми фотографиями.
Я зарание приготовил изображения (ширина 400px) с адресами:http://uanon.ucoz.ru/prosto/povorot/photo_1.jpghttp://uanon.ucoz.ru/prosto/povorot/photo_2.jpghttp://uanon.ucoz.ru/prosto/povorot/photo_3.jpghttp://uanon.ucoz.ru/prosto/povorot/photo_4.jpg
В дальнейшем мы будем присваивать изображениям идентификаторы (id) в соответствии с их именами.
Для начала мы подготовим блок для нашего фотоальбома при помощи тэга div, а также внесем в него фотографии при помощи тэга img (каждое изображение должно быть заключено в собственный тэг div), вот так:
Обратите внимание
Далее потребуется задать блоку стили css. Перечень стилей: «position: relative;» — задаст начало координат от левого верхнего угла нашего блока; «margin: 50px auto;» — задаст отступ нашего блока «50px» сверху и снизу от остального содержания страницы, а так же задаст автоматический отступ справа и слева, выровняв таким образом наш блок по центру; «width: 900px; height: 650px;» — задаст ширину 900px и высоту 650px, соответственно.
Указанный перечень стилей необходимо разместить таким образом:
#photo_page position: relative;margin: 0 auto;width: 900px;height: 650px;text-align: center;>
Обратите внимание на использование «#photo_page» — так мы обратились к идентификатору блока. Теперь мы присвоим общие стили для каждого изображения внутри блока photo_page
Это скругленные углы, серая рамка, белый фон, внутренние отступы и тень
Теперь мы присвоим общие стили для каждого изображения внутри блока photo_page. Это скругленные углы, серая рамка, белый фон, внутренние отступы и тень.
Таким образом будет создан эффект фотографии:
#photo_page imgborder-radius: 7px;border: 1px solid grey;background: #ffffff;padding: 10px;box-shadow: 2px 2px 10px #697898;>
Обратите внимание на использование «#photo_page img» — так мы обратимся ко всем изображениям внутри блока photo_page
Также важно дописать такой короткий стиль:
#photo_page div float: left;>
Он прижимает все блоки внутри блока photo_page к левому краю.
Теперь переходим к повороту размещенных фото. Для этого нам понадобится стиль transform. На данный момент в чистом виде он не используется, а только с приставкой для каждого браузера в начале, вот так:
-webkit-transform: rotate(значение);-moz-transform: rotate(значение);-o-transform: rotate(значение);
Это стиль поворота для браузеров: Google Chrome, Mazilla, Opera (соответственно). Вместо слова «значение» мы будем вставлять число с приставкой deg в конце, вот так:
90deg — поворот на 90 градусов по часовой стрелке.-5deg — поворот на -5 градусов против часовой стрелки.И так далее.
Стиль для фотографии photo_1:
#photo_1 -webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-o-transform: rotate(5deg);>
Первое изображение повернуто на 5 градусов.
Стиль для фотографии photo_2:
#photo_2 -webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);>
Второе изображение повернуто на -3 градуса.
Стиль для фотографии photo_3:
#photo_3 -webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);>
Третье изображение повернуто на -2 градуса.
Стиль для фотографии photo_4:
#photo_4 -webkit-transform: rotate(8deg);-moz-transform: rotate(8deg);-o-transform: rotate(8deg);>
Четвертое изображение повернуто на 8 градусов.
Рассмотрим, как можно корректировать положение изображений. К примеру, вы хотите сместить первое изображение на 20px от верхнего края и на 10px от левого края. В таком случае, необходимо воспользоваться стилем margin. Вот правильный вариант его использования для нашего случая:
#photo_1 margin: 20px -10px -20px 10px;-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-o-transform: rotate(5deg);>
Обратите внимание, первое значение стиля — отступ сверху; второе — отступ справа; третье — отступ снизу; четвертое — отступ слева.Важно: в нашем случае отступ снизу равен отрицательному значению отступа сверху. Если же на вашей странице образуется пустое пространство под изображением, попробуйте сделать отступ снизу от него еще более отрицательным
Работа завершена, я привожу скриншот (с учетом изменения отступа первого изображения, описанного в Шаге 12).
Дописывайте стиль отступа для любых изображений, положение которых вас не устраивает.