Как да използваме най-добре трансформацията в CSS?

В тази статия ще разберем Transform In подробно и го проследете с подробна практическа демонстрация. Следните указания ще бъдат обхванати в тази статия,

• Какво е трансформиране на CSS?
• Какви са различните свойства на преобразуване?

С напредъка във функционалностите на уебсайта е също толкова важно да осигурите интелигентни интеграции на вашия уебсайт, за да го направите привлекателен и по-добър. Добавянето на различни CSS елементи, допълващи вашия сайт, е необходимостта от час.
Хората стоят настрана от уебсайтовете, които всъщност не се харесват на масите. И така, какво ще кажете да се опитате да трансформирате някои от елементите и да разкрасите вашия CSS с по-малка стойност на компресия.
За да изпълним подобни нужди, имаме свойство за преобразуване на CSS, което преобразува елементи, като ги изкривява, завърта, мащабира или ги превежда.

Продължавайки с тази статия за Transform In CSS

Какво е трансформиране на CSS?

Трансформирането на CSS елемент означава да му осигурите ръб в 2D или 3D форма. Визуално променя стила на даден елемент.
2D трансформацията работи по оси X и Y. Можете да предоставите произволен ръб или структура на двете оси, за да направите промени. Докато за 3D трансформация, той трябва да работи по оси X, Y, както и по Z, за да осигури необходимата дълбочина.

CSS 2D свойства за преобразуване:

Свойства на CSS 3D трансформация:

Например:

css .element {ширина: 20px височина: 20px трансформация: мащаб (20)}

Сега, когато го направите, дефинираният елемент ще бъде мащабиран 20 пъти.

Не само това, можете също така да мащабирате ос за хоризонтално и вертикално мащабиране.

transform: scaleX (2) transform: scaleY (.5)

За да осигурите правилна трансформация във всички браузъри, можете:

низ към дата преобразуване в Java

div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}

Свойството за преобразуване на CSS подобрява координатното пространство на нивото на визуално форматиране на CSS.
Какво е ниво на визуално форматиране?
Ниво на визуално форматиране означава обработка на документ и визуално представяне на медийните платформи. С визуалното форматиране можете да трансформирате всеки елемент като модел, който се съгласува с модела на CSS кутия. Моделът на CSS кутия дефинира елемент в стандартен формат на правоъгълна кутия, определящ размера, позицията и свойствата.
Забележка: Само трансформируеми елементи могат да бъдат трансформирани.

Продължавайки с тази статия за Transform In CSS

Какви са различните свойства на преобразуване?

Нека да разгледаме всички трансформиращи свойства:

1. мащаб (): Мащабиране означава промяна на размера на елемента или хоризонтално или вертикално.

За вертикално мащабиране:scaleX

За хоризонтално мащабиране:скалаY

За елемент можете също да промените размера на шрифта, подложката, височината или ширината. Стойността по подразбиране е 1, което също означава предоставяне на 0,5, тъй като стойността го намалява наполовина, докато предоставя 2 удвоява мащабирането.

2. изкривяване (): Свойството наклон позволява на потребителя да наклони елемент надясно или наляво от една координатна точка. Това е почти като превръщането на правоъгълник в паралелограм. Можете да изкривите елемент по неговите координати.

Пример:

.element {преобразуване: skewX (25deg)} .element {преобразуване: skewY (25deg)

Когато го направите, елементът изкривява 25 градуса хоризонтално и вертикално, като използва skewX или skewY.

3. завъртане ( ) : Можете да завъртите елемент по посока на часовниковата стрелка, като използвате това свойство. Можете да го завъртите на 180 градуса или на 360 градуса, за да го върнете на първоначалното му място.

.element {преобразуване: завъртане (25deg)}

За да осигурите и въртене, можете да използвате някое от трите измерения: rotateX, rotateY или rotateZ.

4. превод ( ) : Можете да преместите елемент правилно с главата надолу или настрани.

.element {преобразуване: превод (20px, 10px)}

Преводач ще премести обект / елемент, посочен с главата надолу или настрани. Първата посочена стойност премества обекта вдясно (отрицателната ще го премести вляво), а втората стойност го премества надолу (посочването на отрицателна стойност ще го премести нагоре).

Ако това може да ви обърка, тогава приложете оста X, за да промените позицията на елемента хоризонтално, а осите Y, за да промените позицията вертикално. Най-невероятният аспект на свойството за преобразуване е, че прилагането на преобразуване само ще позволи на елемента да се движи, като запази всеки друг елемент или текст непокътнати. Разстоянието обикновено се взема в пиксели или проценти.

Например:

.element {преобразуване: translateX (стойност) преобразуване: translateY (стойност)}

5. перспектива (): Можете да предоставите дълбочина в перспективата на елемент. Позволява да се даде 3D трансформация на елемент, като се направи кубичен в трансформацията.
translate3d (x, y, z)
превод Z (z)

translate3d (x, y, z) translateZ (z)

Въвеждането на оста z дава на елемента 3D визуализация. translateZ () премества елемента към зрителя, докато отрицателна стойност го отдалечава.

6. матрица () : Комбинирайте всички трансформации в едно.

завъртане (45deg) превод (24px, 25px)

Прилагането на матрица () комбинира всички свойства на преобразуване в един масив.

Прилагането на свойства на преобразуване може значително да подобри вашия елемент и следователно обжалването на вашия уебсайт. Опитайте ги!

Това ни води до края на тази статия за Transform In CSS.

Ако се интересувате да научите повече за уеб разработката, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уеб сайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го внедрите в Amazon Simple Storage Service (S3).

Ако все още се интересувате Ако имате някакъв въпрос, можете да го публикувате в раздела за коментари в този блог „Какво е CSS“ и ние ще се свържем с вас възможно най-скоро.