Свойство 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
• Медиа запросы (@)