• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
  • Удаление вросшего ногтя лазером

    Для вас недорого удаление вросшего ногтя лазером по смешным ценам.

Главная → HTML уроки и советы → CSS → Свойство CSS transform-origin

Свойство CSS transform-origin

Свойство CSS transform-origin нужен для изменения центра координат относительно которого будет осуществляться трансформация (transform). Естественно этот тег работает только в случае трансформации.


Синтаксис CSS transform-origin

transform-origin: X Y Z;

Где Х может принимать значения

  • длина - задается в px относительно центра объекта (например, 5px)
  • проценты - задается в % относительно центра объекта (50% - это центр)
  • left - относительно левого края объекта
  • center - относительно центра (стоит по умолчанию)
  • right - относительно правого края объекта

Где Y может принимать значения

  • длина - задается в px относительно центра объекта (например, 5px)
  • проценты - задается в % относительно центра объекта (50% - это центр)
  • top - относительно верхнего края объекта
  • center - относительно центра (стоит по умолчанию)
  • bottom - относительно нижнего края объекта

Где Z может принимать значения только в единицах.

Прежде чем рассматривать примеры, скажем пару слов про особенности в браузерах.


Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

  • -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform-origin - для Chrome, Safari, Android и iOS
  • -o-transform-origin - для Opera до версии 12.10
  • -moz-transform-origin - для Firefox до версии 16.0


Примеры с transform-origin

Пример #1. Простое вращение относительно левого верхнего угла

<html> <head> <style> .primer1{ width: 100px; height: 100px; background: #444; margin: 30px; } .primer1:hover{ width: 100px; height: 100px; background: #888; margin: 30px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; -webkit-transform-origin: 0px 0px; -o-transform-origin: 0px 0px; -moz-transform-origin: 0px 0px; } </style> </head> <body> <div class="primer1"></div> </body> </html>

На странице преобразуется в следующее


Пример #2. Простое вращение относительно правого нижнего угла

<html> <head> <style> .primer2{ width: 100px; height: 100px; background: #444; margin: 30px; } .primer2:hover{ width: 100px; height: 100px; background: #888; margin: 30px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; } </style> </head> <body> <div class="primer2"></div> </body> </html>

На странице преобразуется в следующее


Пример #3. Масштабирование относительно левого нижнего угла

<html> <head> <style> .primer3{ width: 100px; height: 100px; background: #444; margin: 30px; } .primer3:hover{ width: 100px; height: 100px; background: #888; margin: 30px; -ms-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; } </style> </head> <body> <div class="primer3"></div> </body> </html>

На странице преобразуется в следующее



Пример #4. Масштабирование относительно левого верхнего угла

<html> <head> <style> .primer3{ width: 100px; height: 100px; background: #444; margin: 30px; } .primer3:hover{ width: 100px; height: 100px; background: #888; margin: 30px; -ms-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; } </style> </head> <body> <div class="primer4"></div> </body> </html>

На странице преобразуется в следующее


Пример #5. Масштабирование относительно произвольной точки

Координаты могут выходить и за пределы объекта. Ниже представлен соответствующий пример со значениями 100% и 150% соответственно.

<html> <head> <style> .primer5{ width: 100px; height: 100px; background: #444; margin: 30px; } .primer5:hover{ width: 100px; height: 100px; background: #888; margin: 30px; -ms-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); transform-origin: 100% 150%; -ms-transform-origin: 100% 150%; -webkit-transform-origin: 100% 150%; -o-transform-origin: 100% 150%; -moz-transform-origin: 100% 150%; } </style> </head> <body> <div class="primer5"></div> </body> </html>

На странице преобразуется в следующее


Для обращения из JavaScript к свойству CSS transform-origin используется следующая конструкция:

[window.]document.getElementById("elementID").style.transformOrigin


Читайте также:
• Как сделать треугольник через CSS
• Свойство display
• Свойство transform
• Свойство border
• Свойство background
• Свойство transition
• Свойство text-transform
• Свойство box-shadow
• Медиа запросы (@)

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2021 - Zarabotat-Na-Sajte.ru