CSS Стили
  • !important
  • ::-ms-browse
  • ::-ms-check
  • ::-ms-clear
  • ::-ms-expand
  • ::-ms-fill
  • ::-ms-reveal
  • ::-ms-value
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::placeholder
  • ::selection
  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :root
  • :target
  • :valid
  • :visited
  • @charset
  • @font-face
  • @document
  • @import
  • @keyframes
  • @media
  • @page
  • @viewport
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • border-top-right-radius
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
    • Alpha
    • BasicImage
    • Blur
    • Chroma
    • DropShadow
    • Emboss
    • Engrave
    • Glow
    • Gradient
    • ICMFilter
    • Light
    • MaskFilter
    • Matrix
    • MotionBlur
    • Shadow
    • Wave
  • flex-basis
  • flex-direction
  • float
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • hyphens
  • image-rendering
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-height
  • min-width
  • object-fit
  • opacity
  • orient
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index

CSS стиль transform-origin. Задание центра трансформации

CSS стиль transform-origin задает координаты точки, относительно которой будет происходить трансформация объекта.
Internet Explorer Chrome Opera Safari Firefox
9 10 36 15 23 4 16
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 4 3.5 16 11.5 4

Internet Explorer 9 поддерживает свойство -ms-transform.

Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

Opera с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.

Трансформации преобразовывают элемент, не влияя на остальные части веб-страницы, - это значит, что другие объекты не будут относительно него сдвигаться. По умолчанию трансформации происходят относительно центра элемента. Свойства при этом не наследуются.

Краткая информация по CSS-свойству transform-origin

Значение по умолчанию50% 50% 0
НаследуетсяНет
ПрименяетсяК трансформируемым элементам

Правила написания свойства transform-origin

transform-origin: <x> <y> <z>

Здесь:

<x> - координата по оси X. Может следующие значения: <размер> (в любой единице измерения CSS), <проценты>, left, center, right

<y> координата по оси Y. Может принимать значения: <размер> (в любой единице измерения CSS), <проценты>, top, center, bottom

<z> - координата по оси Z. Может задаваться только в любых единицах для измерения длины (кроме %).

Применение свойства right
Оси при трансформации элемента

Отсчет координат ведется от левого верхнего угла элемента. По умолчанию точка трансформации находится в центре объекта (см. рис. выше). При использовании процентов они высчитываются на основе размеров элемента.

Объектная модель

Объект.style.transformOrigin

Пример применения стиля transform-origin

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля transform-origin</title>
<style>
div {
  border: 1px solid red;
  margin: 60px 5px 0;
  display:inline-block; 
  width: 170px;
  }
p {
  background: #ffbb00;
  padding: 5px 10px;
/* Поворот на 15 градусов по часовой стрелки */
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
 }

div:first-child p {
/* Точка поворота в правом верхнем углу */
  -o-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
</style>
</head>
<body>
  <div><p>С transform-origin</p></div>
  <div><p>Без transform-origin</p></div>
</body>
</html>
Применение свойства transform-origin
Применение свойства transform-origin
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru