Css3 трансформації.

У цій статті ми розглянемо властивість transform, яке дозволяє нам застосовувати різні трансформації до елементів на сторінці.

Розглядати дане властивість ми будемо відразу на прикладі, так що давайте створимо HTML розмітку.

Відео: CSS 3D Трансформації. Приклад з 3D кубом

 
 
Transforms 
charset="Utf-8"gt; 
 
 
class="Block"gt;CSS3 Трансформації

І поставимо початкові стилі

body { 
 background:# aaa- 
 font:1em"PT Sans",Tahoma,Arial- 
} 
 
.block { 
 background: rgba(0,0,0,.3) - 
 border-radius:8px- 
 border:3px solid # fff- 
 color:# fff- 
 font-size:1.2em- 
 height:150px- 
 line-height:150px- 
 margin:80px- 
 text-align: center- 
 width:250px- 
}

Тепер перейдемо, власне, до нашого властивості.

Відео: Трансформації CSS

.block { 
 transform: translate(30px,10px) rotate(30deg) scale(.5) - 
}

translate вказує на яку відстань зрушити об`єкт по осі X і по осі Y, а rotate - на скільки градусів повернути. Можна задавати негативні значення, щоб об`єкт рухався / повертався в протилежну сторону. Scale відповідає за масштаб. Якщо ми напишемо 2, то об`єкт збільшиться в 2 рази, а якщо 0.5(Як в нашому випадку), то зменшиться.

.block { transform: skewX(30deg) skewY(30deg) -}

skewX відповідає за скіс об`єкта по осі X, а skewY по осі Y.

Відео: HTML5, CSS3. Урок 10. Трансформації і анімація

.block { 
 transform: rotate(30deg) - 
 transform-origin: top left- 
}

transform-origin змінює точку, щодо якої йде трансформація по осях X, Y і Z(не обов`язково). За замовчуванням вона знаходиться в центрі, але ми можемо її змінити. Тепер наш об`єкт буде обертатися щодо верхнього лівого кута. Значення так само можна задавати у відсотках (крім осі Z)

Все, що ми зараз розглянули, були 2-х мірні трансформації, але є ще й 3-х мірні.

.block { 
 transform: rotateY(50deg) - 
}

Тут ми повертаємо об`єкт по осі Y на 50 градусів в 3-х мірному просторі, але це виглядає нереалістично, бо немає перспективи. перспектива(Perspective) застосовується до батьківського елементу. Змінимо нашу HTML розмітку: обернём наш блок в ще один.

class="Wrapper"gt; 
class="Block"gt;CSS3 Трансформації

І поставимо для нашого батьківського блоку перспективу(В пікселях) і, звичайно ж, розміри.

.wrapper { 
 perspective:500px- 
 width:200px- 
 height:200px- 
} 
 
.block { 
 transform: rotateY(50deg) - 
}

Тепер наш об`єкт обертається реалістично. Майте на увазі, що точка сходу для перспективи знаходиться десь в центрі елемента wrapper. Якщо ви поміняєте розміри для нашого батьківського блоку, то побачите, що наша трансформація теж змінюється. Експерементіруйте, щоб домогтися кращого результату.

Також є властивість rotate3d, яке дозволяє нам обертати наш об`єкт відразу у всіх осях.