Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - backface-visibility.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Свойство противоположная сторона-видимость в настоящее время поддерживается только в Internet Explorer 10 + и Firefox. Опера 15 +, Chrome, и Safari поддерживают альтернативу, свойство -WebKit-противоположная сторона-видимость.

Определение и использование. Свойство backface-visibility определяет, должен ли элемент быть видимым, когда не перед экраном. Это свойство полезно, когда элемент поворачивается, и Вы не хотите, чтобы увидеть его заднюю сторону, то есть свойство backface-visibility определяет будет ли виден контент( содержание) элемента, который с помощью 3d трансформаций отвернут лицом от пользователя.

По простому говоря, свойство backface-visibility применяется, когда выбранный Вами элемент повернут или вращается с помощью анимации и при этом не хотите, чтобы задняя сторона была видна.

Допустимые значения:

visible — контент элемента виден и тогда, когда элемент 
          повернут лицом от пользователя
hidden  — если элемент повернут лицом от пользователя, контент 
          данного элемента на странице не виден

Самое мощное здесь даже не в том, что производится некое изменение некого участка страницы сайта. Самое мощное здесь в том, что свойство backface-visibility, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера.


Описание и Использование

Значение Описание
visible Значение по умолчанию. Далеко видна
hidden Не видно
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Синтаксис:

            backface-visibility: visible|hidden|initial|inherit;

Пишем программу - Скрыть обратную повернутую сторону элемента:

< !DOCTYPE html>
< html>
< head>
< style> 
div
{
width:150px;
height:80px;
background:red;
color:white;
animation:mymove 2s infinite linear alternate;
-webkit-animation:mymove 2s infinite linear alternate; /*Safari and Chrome*/
}

@keyframes mymove
{
to {transform:rotateY(180deg);}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
to {-webkit-transform:rotateY(180deg);}
}
< /style>
< /head>
< body>

< p>Установите/снимите флажок, чтобы изменить заднюю поверхность-видимость 
анимированного элемента DIV:< /p>

< div id="myDIV">< h2>П Р И В Е Т< /h2>< /div>

< input type="checkbox" onclick="myFunction(this)" checked>backface-visibility

< script>
function myFunction(x) {
  if (x.checked === true) {
    document.getElementById("myDIV").style.backfaceVisibility = "visible";
    document.getElementById("myDIV").style.WebkitBackfaceVisibility = "visible";
     // Код Chrome и Safari
  } else {
    document.getElementById("myDIV").style.backfaceVisibility = "hidden";
    document.getElementById("myDIV").style.WebkitBackfaceVisibility = "hidden";
     // Код Chrome и Safari
  }
}
< /script>

< p>< strong>Примечание:< /strong> задняя поверхность-visibility не
 поддерживаются в Internet Explorer 9 и более ранних версиях.< /p>

< /body>
< /html>                     

Результат программы:

Установите/снимите флажок, чтобы изменить заднюю поверхность-видимость анимированного элемента DIV:

ПРИВЕТ

backface-visibility

Внимание!!! задняя поверхность-visibility не поддерживаются в Internet Explorer 9 и более ранних версиях.

==================================================================================

Вот, Вам на представление еще варианты из серии свойств backface-visibility. Любуйтесь и изучайте:

backface-visibility: visible; backface-visibility: hidden;
1
2
3
4
5
6

Все грани прозрачны и три задние грани видны через переднюю.

1
2
3
4
5
6

Лицевые грани видны, задний план( грани) скрыты.




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: