Уникальное место! Здесь можно легко заработать реальные деньги.
К вашим услугам несколько методов заработка!
Просматривайте сайты, читайте письма рекламодателей, выполняйте несложные и интересные тесты и задания за вознаграждение.
Вы сможете получить свои первые деньги уже сразу после начала работы.
Кликайте по баннеру ниже и начинайте работать!

SEO sprint - Всё для максимальной раскрутки!

Главная » Все материалы сайта » Справочник CSS-3 » Трансформация

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">

</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>

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

Генератор свойства backface-visibility

Введите значение в поле и нажмите Enter ↵

ЭЛЕМЕНТ

Hide the backside:

Rotate:

transform: rotateY(7deg);

Источники: http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Трансформация | Добавил: evkuriy (05.07.2013)

Просмотров: 854 | Рейтинг: 0.0/0

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