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


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



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


transform-style | Свойство CSS

Свойство transform-style устанавливает положение вложенных элементов в 3D пространстве.




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




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


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

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


Значение
Описание
flatВложенные элементы будут находится в плоскости родительского элемента
preserve-3dВложенные элементы будут находится в 3D пространстве,выходя за границы родительского элемента

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Генератор transform-style для 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: rotateY(45deg);
transform-origin:50% 50% 100px;
-webkit-transform: rotateY(70deg);
-webkit-transform-origin:50% 50% 100px;
-moz-transform: rotateY(70deg);
-moz-transform-origin:50% 50% 100px;
-o-transform: rotateY(70deg);
-o-transform-origin:50% 50% 100px;
}

#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
transform-origin:40% 90% 10px;
-webkit-transform: rotateY(80deg);
-webkit-transform-origin:40% 90% 10px;
-moz-transform: rotateY(80deg);
-moz-transform-origin:40% 90% 10px;
-o-transform: rotateY(80deg);
-o-transform-origin:40% 90% 10px;
}
-->
</style>
<script type="text/javascript">
function changeRot(value)
{
document.getElementById('div2').style.transform="rotateY(" + value + "deg)";
document.getElementById('div2').style.webkitTransform="rotateY(" + value + "deg)";
document.getElementById('div2').style.MozTransform="rotateY(" + value + "deg)";
document.getElementById('div2').style.OTransform="rotateY(" + value + "deg)";
document.getElementById('persp').innerHTML=value + "deg";
}

function checkFlat()
{
if (document.getElementById("tf").checked==true)
    {
    document.getElementById('div2').style.webkitTransformStyle="preserve-3d";
    }
else
    {
    document.getElementById('div2').style.webkitTransformStyle="flat";
    }
}
</script>
</head>
<body>
<center>
<h3>Генератор transform-style для Safari и Chrome</h3>
<p>Введите значение в поле и нажмите Enter &crarr; ( работает только в Safari и Chrome)</p>
<br>
<div id="div1">
<div id="div2">РОДИТЕЛЬ
<div id="div3">ЭЛЕМЕНТ</div></div></div>
webkit-transform-style: preserve-3d<input type="checkbox" onchange="checkFlat()" id="tf" ><br><br>
Rotate:<br>
<input type="range" min="-360" max="360" value="70" onchange="changeRot(this.value)"><br>
-webkit-transform: rotateY:(<span id="persp">70deg</span>);
</center>
</body>
</html>

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




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





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






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

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

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