Свойство perspective
Последнее обновление: 29.12.2010
Свойство perspective применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них.
Придает глубину изображению, в результате чего элементы, находящиеся для зрителя дальше будут казаться меньше, а находящиеся ближе — больше.
Допустимые значения
- none — дочерние элементы находятся в плоскости родительского элемента
- — расстояние в пикселях от точки, из которой как бы смотрит пользователь, до плоскости, в которой будут находиться дочерние элементы.
| Значение по умолчанию | none |
|---|---|
| Применимо | к блочным и строчным элементам |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
div {
width:100px;
height:50px;
transform:rotate(45deg) skale(1,5 3) skewX(15deg);
transform-style:preserve-3d;
perspective:30px;
}
Твой код:
Результат:
большой полигон
Заметки
Safаri 5 и выше поддерживает аналогичное свойство -webkit-perspective
Также для Safаri 5 и выше есть возможность применить свойство -webkit-transform со значением функции perspective. Отличие в том, что функция perspective применяется к элементу непосредственно, а свойство perspective применяется только к дочерним элементам.
По теме
- CSS свойство perspective-origin
- CSS свойство -webkit-perspective-origin
- CSS свойство transform
- CSS свойство -o-transform
- CSS свойство -moz-transform
- CSS свойство backface-visibility
- CSS свойство -webkit-backface-visibility
- CSS свойство transform-style
- CSS свойство -webkit-transform-style
Показать комментарии