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


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



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


backface-visibility | Свойство CSS

Свойство backface-visibility устанавливает видимость задней части элемента.




Свойство backface-visibility устанавливает видимость задней части элемента при его развороте.При установленных значениях можно отменить показ задней части элемента при его развороте на 180 градусов.Существуют альтернативные свойства для браузеров.Для Mozila -moz-backface-visibility,а для Safari и Chrome -webkit-backface-visibility.Свойство применимо к блочным и строчным элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




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


Свойство
Описание
-moz-backface-visibilityАльтернативное свойство для браузера Mozila
-webkit-backface-visibilityАльтернативное свойство для браузеров Safari и Chrome

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


Значение
Описание
visibleПри развороте заднюю часть элемента будет видно
hiddenПри развороте заднюю часть элемента не будет видно

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Генератор свойства backface-visibility</title>
<style type="text/css">
<!--
#div1 {
width:120px;
height:100px;
background-color:orange;
border:5px double green;
transform:rotateY(25deg);
-webkit-transform:rotateY(25deg);
-moz-transform:rotateY(25deg);
}
-->
</style>
<script type="text/javascript">
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotateY(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotateY(" + value + "deg)";
document.getElementById('div1').style.transform="rotateY(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
function checkBackface()
{
if (document.getElementById("bf").checked==true)
    {
    document.getElementById('div1').style.webkitBackfaceVisibility="hidden";
    document.getElementById('div1').style.MozBackfaceVisibility="hidden";   
    }
else
    {
    document.getElementById('div1').style.webkitBackfaceVisibility="visible";
    document.getElementById('div1').style.MozBackfaceVisibility="visible";       
    }
}
</script>
</head>
<body>
<center>
<h3>Генератор свойства backface-visibility</h3>
<p>Введите значение в поле и нажмите Enter &crarr;</p>
<div id="div1">ЭЛЕМЕНТ</div>
<p>Hide the backside:<input type="checkbox" onchange="checkBackface()" id="bf"></p>
Rotate:<br>
<input type="range" min="-360" max="360" value="25" onchange="rotate(this.value)"><br>
transform: rotateY(<span id="span1">7deg</span>);<br>
</body>
</html>

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




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





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






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

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

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