CSS свойство backface-visibility
CSS свойстваОпределение и применение
CSS свойство backface-visibility определяет, должна ли быть видна задняя сторона элемента или нет. Данное свойство применяется для того, чтобы при трансформации элемента скрыть его заднюю сторону, а не отображать её зеркально (значение по умолчанию).
Поддержка браузерами
Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|
backface-visibility | 36.0 12.0 -webkit- | 16.0 10.0 -moz- | 23.0 15.0 -webkit- | 4.0 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
backface-visibility:"visible | hidden | initial | inherit";
JavaScript синтаксис:
object.style.backfaceVisibility = "visible"
Значения свойства
Значение | Описание |
---|---|
visible | Задняя сторона элемента видна (отображается). Это значение по умолчанию. |
hidden | Задняя сторона элемента скрыта (не отображается). |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Отображение задней стороны элемента при трансформации в CSS</title> <style> div { display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */ width : 200px; /* устанавливаем ширину блока */ height : 200px; /* устанавливаем высоту блока */ margin : 50px; /* устанавливаем величину внешнего отступа для всех сторон элемента */ font-size: 32px; /* устанавливаем размер шрифта */ text-align: center; /* выравниваем текст по центру */ line-height: 200px; /* для выравнивания текста по вертикали устанавливаем междустрочный интервал равным высоте элемента */ } @-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */ 100% { -moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ -webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ -ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ transform : rotateY(360deg); /* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */ } } @keyframes iliketomoveit { 100% { -moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ -webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ -ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ transform : rotateY(360deg);/* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */ } } .test { -webkit-animation : iliketomoveit 5s linear infinite; /* для поддержки ранних версий браузеров */ animation : iliketomoveit 5s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ background : green; /* устанавливаем цвет заднего фона */ -webkit-backface-visibility : visible; /* для поддержки ранних версий браузеров */ -moz-backface-visibility : visible; /* для поддержки ранних версий браузеров */ backface-visibility : visible; /* задняя сторона элемента видна (отображается) - это значение по умолчанию */ } .test2 { -webkit-animation : iliketomoveit 5s linear infinite; /* для поддержки ранних версий браузеров */ animation : iliketomoveit 5s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ background : orange; /* устанавливаем цвет заднего фона */ -webkit-backface-visibility : hidden; /* для поддержки ранних версий браузеров */ -moz-backface-visibility : hidden; /* для поддержки ранних версий браузеров */ backface-visibility : hidden; /* задняя сторона элемента скрыта (не отображается) */ } </style> </head> <body> <div class = "test"> VISIBLE </div> <div class = "test2"> HIDDEN </div> </body> </html>CSS свойства