From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/backface-visibility/index.html | 270 ++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 files/es/web/css/backface-visibility/index.html (limited to 'files/es/web/css/backface-visibility/index.html') diff --git a/files/es/web/css/backface-visibility/index.html b/files/es/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..509c6e05fc --- /dev/null +++ b/files/es/web/css/backface-visibility/index.html @@ -0,0 +1,270 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - Experimental + - Propiedad CSS + - Referencia +translation_of: Web/CSS/backface-visibility +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Resumen

+ +

La propiedad CSS backface-visibility determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.

+ +

Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).

+ +

Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
backface-visibility: visible;
+backface-visibility: hidden;
+
+ +

Valores

+ +

Esta propiedad puede tener dos valores diferentes (y exclusivos):

+ + + +

Sintaxis formal

+ +
+
+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Cubo con caras transparentes

+ +

Contenido HTML

+ +
<table>
+  <tbody>
+    <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>All the faces are transparent and the three back faces are visible through the front ones.</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>No face is opaque, but the three back faces are always hidden now.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

Contenido CSS

+ +
/* Shorthand classes that will show or hide the three back faces of the "cube" */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.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;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-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;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}{{Spec2('CSS3 Transforms')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico12{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}
+ {{CompatGeckoDesktop("16")}}[1]		1015{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}
+ {{CompatGeckoMobile("16")}}[1]		8.1
+ 11{{property_prefix('-webkit')}}		{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}
+
+ +

[1] Además del soporte sin prefijo, Gecko 45.0 {{geckoRelease("45.0")}} añadió sopore para una versión de la propiedad con prefijo -webkit por razones de compatibilidad, bajo la preferencia layout.css.prefixes.webkit, con valor predeterminado de false. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + -- cgit v1.2.3-54-g00ecf