Шаблон:Transform-rotate

Документация

[просмотр | править | история | обновить]

CSS код вращения элемента. Используется внутри style="" HTML элемента как и другие CSS свойства.

первый неименованый параметр {{{1}}} для угла вращения (в градусах). Положительное значение означает вращение вправо, отрицательное влево.
именованый параметр |display = позволяет изменять свойства CSS. Его значение по умолчанию display: inline-block;

Примеры

The rotating happens at the center of the object and its effective dimensions will retain the original values of the object as if unrotated, so you may adjust the position and padding to avoid unwanted overlapping. Use the display= parameter to further control positioning.

Код	Результат
Вращение букв:
`<span style="{{Transform-rotate\|90}}">A</span> <span style="{{Transform-rotate\|180}}">B</span> <span style="{{Transform-rotate\|270}}">C</span> <span style="{{Transform-rotate\|360}}">D</span>`	A B C D
Также можно применять к цифрам
`<span style="{{Transform-rotate\|0}}">0</span> <span style="{{Transform-rotate\|10}}">1</span> <span style="{{Transform-rotate\|20}}">2</span> <span style="{{Transform-rotate\|30}}">3</span> <span style="{{Transform-rotate\|40}}">4</span> <span style="{{Transform-rotate\|50}}">5</span> <span style="{{Transform-rotate\|60}}">6</span> <span style="{{Transform-rotate\|70}}">7</span> <span style="{{Transform-rotate\|80}}">8</span> <span style="{{Transform-rotate\|90}}">9</span>`	0 1 2 3 4 5 6 7 8 9
Или тексту
`<span style="{{Transform-rotate\|-90}}">This text<br>is vertically<br>aligned.</span><br> <br><span style="{{Transform-rotate\|-180}}">This text is upside down.</span>`	This text is vertically aligned. This text is upside down.
А также изображения
`<div style="position:relative; top:0px; left:0px; {{Transform-rotate\|90\|display=block}}">[[file:Image PlaceHolder.png\|200px]]</div>`
Красная линия повернута на 30 градусов
`<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transform-rotate\|-30\|display=block}}"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.