Перспектива - CSS-трикове

В perspectiveCSS имота дава елемент на 3D-пространството, като засяга разстоянието между Z равнина и потребителя.

Силата на ефекта се определя от стойността. Колкото по-малка е стойността, толкова по-близо се приближавате от равнината Z и толкова по-впечатляващ е визуалният ефект. Колкото по-голяма е стойността, толкова по-фин ще бъде ефектът.

Важно: Моля, обърнете внимание, че свойството перспектива не влияе върху това как се изобразява елементът; той просто позволява 3D-пространство за детски елементи. Това е основната разлика между transform: perspective()функцията и perspectiveсвойството. Първият дава дълбочина на елемента, докато по-късно създава 3D-пространство, споделено от всички негови трансформирани деца.

/** * Syntax * perspective: none |  */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); )

Вижте тази писалка!

Горната демонстрация има за цел да покаже разликата между функцията и свойството.

От лявата страна можете да видите свойството, приложено към родителя ( perspective: 50em) на трансформирани елементи ( transform: rotateY(50deg)).
От дясната страна перспективата се прилага от трансформацията директно върху деца ( transform: perspective(50em) rotateY(50deg)).

Това показва как перспективата за настройка на родителя кара всички деца да споделят едно и също 3D пространство и по този начин една и съща точка на изчезване.

Нека опитаме нещо още по-хладно: куб с 3D трансформации и перспектива.

Вижте тази писалка!

Ето как е направен кубът: той разчита на две вложени обвивки (едната, за да даде на куба перспектива, и другата, която да увива всички страни) и 6 елемента, за да направи страните. На всеки елемент е дадено свое собствено преобразуване, смесване на превод и въртене в 3D-пространството (например transform: rotateX(90deg) translateZ(1em)).

Нека завършим с демонстрация, включваща това, което би могло да бъде основата на реалния световен дизайн: стена от снимки + надписи, използващи перспектива и трансформация.