transform css

Свойство transform CSS поддерживается браузерами с использованием префикса
-moz-transform для Firefox
-webkit-transform для Chrome и Safari
-o-transform для Opera
-ms-transform для Internet Explorer 9

transform: rotate поворачивает элемент по часовой стрелке на заданный угол (45deg). Ещё примеры CSS поворота.

  • none
    transform: none;
  • -45deg
    transform: rotate(-45deg);
  • -20deg
    transform: rotate(-20deg);
  • 20deg
    transform: rotate(20deg);
  • 45deg
    transform: rotate(45deg);
  • 90deg
    transform: rotate(90deg);



transform: scale масштабирует элемент. Или по другому scaleX вытягивает или сужает (при значении менее 1) прямоугольник по горизонтали, а scaleY - вертикали.


  • none
    transform: none;

  • 0.7, 1
    transform: scale(0.7, 1);
    или
    transform: scaleX(0.7);
  • 1.2, 1
    transform: scale(1.2, 1);
    или
    transform: scaleX(1.2);
  • 1, 0.7
    transform: scale(1, 0.7);
    или
    transform: scaleY(0.7);
  • 1, 1.2
    transform: scale(1, 1.2);
    или
    transform: scaleY(1.2);
  • 2, 2
    transform: scale(2, 2);



transform: skew задаёт перекосы по оси X и Y под заданным углом.

  • none
    transform: none;

  • 30deg, 0deg
    transform: skew(30deg, 0deg);
    или
    transform: skewX(30deg);
  • 60deg, 0deg
    transform: skew(60deg, 0deg);
    или
    transform: skewX(60deg);
  • 0deg, 10deg
    transform: skew(0deg, 10deg);
    или
    transform: skewY(10deg);
  • 0deg, 30deg
    transform: skew(0deg, 30deg);
    или
    transform: skewY(30deg);
  • -30deg, -20deg
    transform: skew(-30deg, -20deg);



transform: translate перемещает элемент на указанное количество px в лево и вниз при положительных значениях.

  • none
    transform: none;

  • -60px, 0px
    transform: translate(-60px, 0px);
    или
    transform: translateX(-60px);
  • 50px, 0px
    transform: translate(50px, 0px);
    или
    transform: translateX(50px);
  • 0px, -30px
    transform: translate(0px, -30px);
    или
    transform: translateY(-30px);
  • 0px, 10px
    transform: translate(0px, 10px);
    или
    transform: translateY(10px);
  • 40px, -40px
    transform: translate(40px, -40px);


transform: matrix объединяет scale, skew и translate. Упрощенно формулу можно показать как:
transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY);
  • none
    transform: none;
  • transform
    -moz-transform: scale(1.3, 1.3) skew(10deg, -20deg) translate(-40px, -40px);
    -ms-transform: scale(1.3, 1.3) skew(10deg, -20deg) translate(-40px, -40px);
    -o-transform: scale(1.3, 1.3) skew(10deg, -20deg) translate(-40px, -40px);
    -webkit-transform: scale(1.3, 1.3) skew(10deg, -20deg) translate(-40px, -40px);
  • matrix
    -moz-transform: matrix(1.3, -0.47319, 0.2291, 1.3, -61px, -33px);
    -ms-transform: matrix(1.3, -0.47319, 0.2291, 1.3, -61px, -33px);
    -o-transform: matrix(1.3, -0.47319, 0.2291, 1.3, -61px, -33px);
    -webkit-transform: matrix(1.3, -0.47319, 0.2291, 1.3, -61px, -33px);

И, напоследок, пример использования с http://www.cssplay.co.uk/. Обратите внимание на стих - крик души таки.

Бык


Я люблю свою работу,
Я приду сюда в субботу
И конечно в воскресенье.

Здесь я встречу день ражденья,
Новый год, 8 марта,
Ночевать я буду завтра!

Если я не заболею,
Не сорвусь, не озверею,
Здесь я встречу все рассветы,
Все закаты и приветы.

От работы дохнут кони,
Ну, а я... БЕССМЕРТНЫЙ ПОНИ!
бык рассерчал
<style type="text/css">
div.pad {width:600px; height:480px; padding:45px; margin:20px auto; position:relative; overflow:hidden; background:#000;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}

div.pad > div {width:300px; height:480px; position:relative; float:right;}
div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:40px; background:#58a;
transform: skewy(-15deg); 
-o-transform: skewy(-15deg); 
-moz-transform: skewy(-15deg); 
-webkit-transform: skewy(-15deg); 
-webkit-transition: 2.0s ease-in-out;
-moz-transition: 2.0s ease-in-out;
-ms-transition: 2.0s ease-in-out;
-o-transition: 2.0s ease-in-out;
transition: 2.0s ease-in-out;
}

div.pad > div > div:nth-of-type(2) {width:300px; height:550px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-transform: rotate(-49deg);
-moz-transform: rotate(-49deg);
-ms-transform: rotate(-49deg);
-o-transform: rotate(-49deg);
transform: rotate(-49deg);
-webkit-transform-origin: 0 -260px;
-moz-transform-origin: 0 -260px;
-ms-transform-origin: 0 -260px;
-o-transform-origin: 0 -260px;
transform-origin: 0 -260px;
-webkit-transition: 2.0s ease-in-out;
-moz-transition: 2.0s ease-in-out;
-ms-transition: 2.0s ease-in-out;
-o-transition: 2.0s ease-in-out;
transition: 2.0s ease-in-out;
}

div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:80px; background:#ddd;
transform: rotate(49deg) skewy(-15deg); 
-o-transform: rotate(49deg) skewy(-15deg);
-moz-transform: rotate(49deg) skewy(-15deg); 
-webkit-transform: rotate(49deg) skewy(-15deg); 
-webkit-transform-origin: 0 -340px;
-moz-transform-origin: 0 -340px;
-ms-transform-origin: 0 -340px;
-o-transform-origin: 0 -340px;
transform-origin: 0 -340px;
-webkit-transition: 2.0s ease-in-out;
-moz-transition: 2.0s ease-in-out;
-ms-transition: 2.0s ease-in-out;
-o-transition: 2.0s ease-in-out;
transition: 2.0s ease-in-out;
}

div.pad > div > div:nth-of-type(3) {width:300px; height:550px; position:absolute; left:-300px; top:-10px; overflow:hidden;
-webkit-transform-origin: 300px -260px;
-moz-transform-origin: 300px -260px;
-ms-transform-origin: 300px -260px;
-o-transform-origin: 300px -260px;
transform-origin: 300px -260px;
-webkit-transform: rotate(-49deg);
-moz-transform: rotate(-49deg);
-ms-transform: rotate(-49deg);
-o-transform: rotate(-49deg);
transform: rotate(-49deg);
-webkit-transition: 2.0s ease-in-out;
-moz-transition: 2.0s ease-in-out;
-ms-transition: 2.0s ease-in-out;
-o-transition: 2.0s ease-in-out;
transition: 2.0s ease-in-out;
} 

div.pad > div > div:nth-of-type(3) div {width:300px; height:400px; position:absolute; left:0; top:90px; background:#eee;
transform: rotate(-49deg) skewy(15deg); 
-o-transform: rotate(-49deg) skewy(15deg);
-moz-transform: rotate(-49deg) skewy(15deg); 
-webkit-transform: rotate(-49deg) skewy(15deg); 
-webkit-transform-origin: 300px -340px;
-moz-transform-origin: 300px -340px;
-ms-transform-origin: 300px -340px;
-o-transform-origin: 300px -340px;
transform-origin: 300px -900px;
-webkit-transition: 2.0s ease-in-out;
-moz-transition: 2.0s ease-in-out;
-ms-transition: 2.0s ease-in-out;
-o-transition: 2.0s ease-in-out;
transition: 2.0s ease-in-out;
} 


div.pad > div:hover > div:nth-of-type(1) {
top:80px;
-webkit-transform: rotate(0deg) skewy(0deg);
-moz-transform: rotate(0deg) skewy(0deg);
-ms-transform: rotate(0deg) skewy(0deg);
-o-transform: rotate(0deg) skewy(0deg);
transform: rotate(0deg) skewy(0deg);
}


div.pad > div:hover > div:nth-of-type(2) {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

div.pad > div:hover > div:nth-of-type(2) div {
-webkit-transform: rotate(0deg) skewy(0deg);
-moz-transform: rotate(0deg) skewy(0deg);
-ms-transform: rotate(0deg) skewy(0deg);
-o-transform: rotate(0deg) skewy(0deg);
transform: rotate(0deg) skewy(0deg);
}

div.pad > div:hover > div:nth-of-type(3) {
-webkit-transform-origin: 310px -260px;
-moz-transform-origin: 310px -260px;
-ms-transform-origin: 310px -260px;
-o-transform-origin: 310px -260px;
transform-origin: 310px -260px;

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
div.pad > div:hover > div:nth-of-type(3) div  {
-webkit-transform: rotate(0deg) skewy(0deg);
-moz-transform: rotate(0deg) skewy(0deg);
-ms-transform: rotate(0deg) skewy(0deg);
-o-transform: rotate(0deg) skewy(0deg);
transform: rotate(0deg) skewy(0deg);
}

div.pad > div > div:nth-of-type(1) img {display:block; margin:75px auto;}
div.pad > div > div:nth-of-type(2) div img {padding-top:35px; float:left;}
div.pad > div > div:nth-of-type(3) div img {padding-top:35px; float:right;}
</style>

<div class="pad">
<div>
<div>контент лицевого листа</div>
<div>
<div>контент второго листа</div>
</div>
<div>
<div>контент первого листа</div>
</div>
</div>
</div>

Свойство transform часто используется совместно с transition и transform-origin.
в f t
наверх ↑

16 комментариев:

XaSeR
Ого, незнал что на CSS можно такие штуки проворачивать...интересно...
NMitra
Да, много интересных вещей в последнее время появилось.
DmytroSlyusar
А я знал конечно почти все, но последний вариант просто убил)))
Класс , спс.
NMitra
Рада слышать!
DmytroSlyusar
Кстати, что значат эти знаки в CSS: >,~
NMitra
Про запятые думаю понятно - задаём группу свойств одним и тем же классам, id.

Остальное не могу со 100% уверенностью сказать, только догадки, поскольку информации толком не изучала. Почитаю, напишу статью.
NMitra
Посмотрите эту статью http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Я думаю, что вам всё это знакомо.

Вторую планирую в том же духе. Хотя для большинства моих читателей - это китайская грамота.
Космо Мизраил Горыныч
Знак >
Означает, что элемент должен быть прямым наследником указанного, т.е. при div > span {...}
div -> span работает, а вот
div -> p -> span - не работает.

Знак +
Просто выбирает элемент, который стоит сразу после указанного. Очень часто используется при создании всплывающих подсказок.

Знак ~
Обратен знаку + . Выбирает эл-т перед указанным.

Вот такая вот арифметика :)
также знак ~ используется при сравнении параметров; правило исполняется, если есть указанное слово в указанном параметре, например:
p[title~="Кря"] {display: none;}
NMitra
О, спасибо! Приятно вновь видеть на страницах блога!
NMitra
Показала то же, что сказал Космо Мизраил Горыныч, только в примерах - http://shpargalkablog.ru/2011/10/css-selectors.html
Elizaveta Klishchuk
Подскажите, как в блоке с transform: rotate расположить текст и другие блоки уже под обычным углом?
NMitra
Нужно div-ом обернуть текст и другие блоки, которому задать противоположный угол.
Анонимный
КРУТО
NMitra
Спасибо!
Анонимный
Спасибо за отличный урок. Скажите как сделать так чтобы свойство translate применялось к блоку div, а сам блок оставался фиксирован. Чтобы только фон поднимался внутри блока. Спасибо
NMitra
Фон можно двигать с background-position (пример http://jsfiddle.net/NMitra/fa5grztq/ )

div {
height: 25em;
background: green url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) no-repeat 0 100%;
transition: 3s;
}
div:hover {
background-position: 0 0;
}

Cм
http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html
http://shpargalkablog.ru/2011/07/transformaciya-css.html