Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - transform-origin.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Определение и использование. Свойство transform-origin позволяет изменить положение на трансформированных элементах. 2D преобразование элемента изменяет х-и у-оси элемента. 3D преобразовывает элемент еще в направлении Z-ось элемента. Внимание!!! Свойство transform-origin следует использовать вместе с transform-property.

Итак, по простому говоря, свойство transform-origin устанавливает начало координат преобразования выбранного Вами элемента для преобразования( трансформации).

Для свойства transform-origin указывается от одного до трех значений длины:

      -Первое значение длины указывает положение на оси x по отношению к полю, 
        содержащему элемент. Может быть числовое значение длины, процентное 
        соотношение или одно из следующих трех ключевых слов: left, center, right.
      -Второе значение длины указывает положение на оси y по отношению к полю, 
        содержащему элемент. Может быть числовое значение длины, процентное 
        соотношение или одно из следующих трех ключевых слов: top, center, bottom.
      -Третье значение длины указывает положение на оси z по отношению к полю, 
        содержащему элемент. Данное значение должно быть числовым.

Особенно интересное и полезное в данном случае не в том, что совершается какое-то изменение какого-то участка( элемента) страницы сайта. Вся удивительная и необходимая информация содержится в том, что свойство transform-origin, которое действует через стили CSS3 самостоятельно и независимо работает и при отключения JavaScripta в браузере Вашего компьютера. Вам не надо гадать: будет работать - не будет работать, потому как работает постоянно и стабильно.

Синтаксис:

              transform-origin: x-axis y-axis z-axis|initial|inherit;

Описание и Использование

Значение по умолчанию: 50% 50% 0
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transformOrigin="0 0"

Свойства Значения

Значение Описание
x-ось Определения, размещенные на X-оси( для 3D-преобразования). Возможные значения:
  • left
  • center
  • right
  • length
  • %
y-ось Определения, размещенные на Y-оси( для 3D-преобразования). Возможные значения:
  • top
  • center
  • bottom
  • length
  • %
z-ось Определения, размещенные на Z-оси( для 3D-преобразования). Возможные значения:
  • length
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.

Пишем программу - установить развернутый элемент:

< !DOCTYPE html>
< html>
< head>
< style>
#rr1
{
position: relative;
height: 250px;
width: 250px;
margin: 80px;
padding:10px;
border: 1px solid #07F;
}

#rr2
{
padding:50px;
position: absolute;
border: 1px solid #07F;
background-color: #F7C;
transform: rotate(45deg);
transform-origin:30% 50%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:30% 50%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Opera, Chrome, and Safari */
-webkit-transform-origin:20% 40%; /* Opera, Chrome, and Safari */
}
< /style>
< /head>
< body>
< div id="rr1">
< div id="rr2">ПРИВЕТ!!!< /div>
< /div>
< /body>
< /html>

Результат программы:

ПРИВЕТ!!!


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: