③ Точка трансформации transform-origin

Продолжим изучение темы CSS3 - трансформации. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-трансформации
• ② Функции 2D-трансформации transform

Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов. Не наследуется.

transform-origin

Значения:

• ось Х(left, center, right, длина, %); ось Y(top, center, bottom, длина, %) - Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.
• initial - Устанавливает значение свойства в значение по умолчанию.
• inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

div {
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 20% 40%; 
-ms-transform-origin: 20% 40%; 
transform-origin: 20% 40%;
}

HTML

<div class="container">
  <div class="wrap">
    <div class="element element-1">
      <kbd>50% 50%</kbd>
    </div>
  </div>
  <div class="wrap">
    <div class="element element-2">
      <kbd>top left</kbd>     
    </div>
  </div>
  <h3><kbd>transform-origin</kbd></h3>
  <div class="wrap">
    <div class="element element-3">
      <kbd>110% 110%</kbd>      
    </div>
  </div>
  <div class="wrap">
    <div class="element element-4">
      <kbd>50px 50px</kbd>      
    </div>
  </div>
</div>

CSS

*{box-sizing:border-box}
body {margin: 0;overflow-x:hidden}
.container {
  margin: 0 auto;
  max-width: 580px;
}
.wrap {
  width: 120px;
  height: 120px;
  background: #E6E0CA;
  display: inline-block;
  margin: 80px;
}
h3{margin:0;text-align:center}
@-webkit-keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
}
@keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
}
.element {
  width: 120px;
  height: 120px;
  color: white;
  text-align: center;
  line-height: 120px;
  -webkit-animation: rotate 6s linear infinite;
  animation: rotate 6s linear infinite;
}
.element-1 {
  background: #FFCC00;
}
.element-2 {
  background: #FF9900;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}
.element-3 {
  background: #875678;
  -webkit-transform-origin: 110% 110%;
  -ms-transform-origin: 110% 110%;
  transform-origin: 110% 110%;
}
.element-4 {
  background: #00E4F6;
  -webkit-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
}
@media (max-width: 580px){
  .wrap {
    display: block;
  margin: 80px auto;
  }
}

Продолжение в следующей статье!