Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.

Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)

Синтаксис

/* Значения ключевых слов */
backface-visibility: visible;
backface-visibility: hidden;

/* Глобальные значения */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;

Свойство backface-visibility указывается в качестве одного из ключевых слов, перечисленных ниже.

Значения

visible
Задняя сторона видна, когда повернута к пользователю.
hidden
Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.

Официальный синтаксис

visible | hidden

Пример

В этом примере показан куб с прозрачными гранями.

HTML

<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        Since all faces are partially transparent,
        the back faces (2, 4, 5) are visible
        through the front faces (1, 3, 6).
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        The three back faces (2, 4, 5) are
        hidden.
      </p>
    </td>
  </tr>
</table>

CSS

/* Классы, которые будут показывать или скрывать 
   три задние грани "куба" */
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/* Определяет контейнер div, кубический div и общую грань */
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Определяет каждое лицо на основе направления */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Сделает стол немного лучше */
th, p, td {
  background-color: #EEEEEE;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Transforms Level 2
Определение 'backface-visibility' в этой спецификации.
Редакторский черновик Первоначальное определение.

Начальное значениеvisible
Применяется ктрансформируемые элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
backface-visibility
Экспериментальная
Chrome Полная поддержка 12
С префиксом
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 16
Полная поддержка 16
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 45
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 15
С префиксом
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 3
С префиксом
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -moz-
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка Да
С префиксом
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Akh-rman, Rammfall
Обновлялась последний раз: mdnwebdocs-bot,