Html transformation

1. CSS 2D & 3D
Transformation
БОЯН ИВАНОВ

2. CSS 2D Трансформация
 За да постигнем някакъв вид ефект върху даден
HTML елемент можем да използваме :
transform :
• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()
2

3. Transform : translate()
 Използвайки “translate()” можем да преместим
даден елемент от текущата му позиция. Примерно
tranform : translate ( 100px , 200px);
 В този пример, елементът с зададените параметри
ще се преместри със 100px на ляво и
200px на долу.
3

4. Transform : rotate()
 Rotate опцията се използва за да завъртим избран
от нас елемент. Това се получава въвеждайки
желаните градуси като стойност на атрибута.
Примерно :
transform : rotate(40deg);
 В примера елементът ни ще
се завърти с 40 градуса по
чесовниковата стрелка.
4

5. Transform : scale (x, y)
 Scale ни дава възможноста да промениме мащаба
на даден елемент по координатната им ос.
Стойностите които се въвеждат е номер, по който
да се умножи ширината и дължината. Примерно :
transform : scale ( 2 , 3 );
 Примера ще ни даде елемент, на
който ширината ще е двойна на зададената, а
височината тройна.
5

6. Transform : skewX(), skewY()
& skew()
 Тази опция ни предлага да „изкривим“ избран
елемент по X, по Y или и по-двата координата.
Примерно :
transform : skewY(20deg);
transform : skew(20deg, 30deg);
 Използвайки skew ние можем да дефинираме
както градусите по X така и по Y.
6

7. Transform : matrix()
 Ако искаме да комбинираме всичките опции, които
разгледахме до сега, можем да използваме matrix().
 Параметрите са следните :
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),tra
nslateY());
Примери:
transform: matrix(1, -0.3, 0, 1, 0, 0);
transform: matrix(1, 0, 0.5, 1, 50, 0);
7

8. CSS 3D Трансформация
 По същия начин за постигането на 3D ефекти с
CSS можем да използваме следните опции :
transform :
• rotateX()
• rotateY()
• rotateZ()
8

9. Transform : rotateX(),
rotateY() & rotateZ
 Използвайки различните видове на rotate можем да
завъртим избран елемент по Х, Y или Z оста му.
 Синтаксиса на всяка една от опциите представлява
:
transform : rotateX(60deg);
transform : rotateY(120deg);
transform : rotateZ(180deg);
9

10. Благодаря Ви за
вниманието.
Въпроси?