perspective | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » 2D & 3D Трансформация


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


perspective | Свойство CSS

Свойство perspective устанавливает глубину видимых элементов из разных точек в 3D пространстве.




Свойство perspective устанавливает глубину видимых элементов из разных точек в 3D пространстве,при этом создаётся эффект удаления и приближения вложенных элементов.На момент создания статьи не поддерживалось не одним браузером,за исключением Safari и Chrome поддерживающими альтернативное свойство -webkit-perspective.Это свойство должно применяться совместно со свойством transform-style и префиксами ( альтернативными свойствами ) к нему.Свойство применимо к блочным и строчным элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к perspective


Свойство
Описание
-webkit-perspectiveАльтернативное свойство для браузеров Safari и Chrome,поддерживает 3D трансформацию

Дополнительные значения применяемые к perspective


Значение
Описание
noneВложенные элементы будут находится в плоскости родительского элемента
<Число>Числовое значение в пикселях ( px ),создаст эффект глубины вложенных элементов для наблюдателя

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Генератор свойства perspective для Safari и Chrome</title>
<style type="text/css">
<!--
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}
-->
</style>
<script type="text/javascript">
function changePersp(value)
{
document.getElementById('div1').style.webkitPerspective=value;
document.getElementById('persp').innerHTML=value;
}
</script>
</head>
<body onload="changePersp(200);updateOrigPerpective()">
<center>
<h3>Генератор свойства perspective для Safari и Chrome</h3>
<p>Введите значение в поле и нажмите Enter &crarr; ( работает только в Safari и Chrome)</p>
<br>
<div id="div1">
<div id="div2">ЭЛЕМЕНТ</div></div>
Change perspective:<br>
<input type="range" min="45" max="2000" value="200" onchange="changePersp(this.value)"><br>
-webkit-perspective: <span id="persp"></span>;
</center>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-transforms/#perspective-property
Категория: 2D & 3D Трансформация | Добавил: IZOTOP (29.05.2012) | Автор: Меренков Михаил E W
Просмотров: 3028 | Теги: css, Perspective, пример, Трансформация, style, 3D | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]