CSS
Transformaciones 3D

Observaciones

Cubo 3D

Las transformaciones 3D se pueden usar para crear muchas formas 3D. Aquí hay un ejemplo simple de un cubo 3D CSS:

HTML:

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

CSS:

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

Ver este ejemplo
Se agrega un estilo adicional en la demostración y se aplica una transformación al pasar el cursor para ver las 6 caras del cubo.

Cabe señalar que:

• 4 caras están hechas con pseudo elementos.
• se aplican transformadas encadenadas

visibilidad de la cara posterior

La propiedad de backface-visibility relaciona con las transformaciones 3D.

Con las transformaciones 3D y la propiedad de backface-visibility la backface-visibility , puede rotar un elemento de manera que la parte frontal original de un elemento ya no esté frente a la pantalla.

Por ejemplo, esto haría retroceder un elemento de la pantalla:

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Firefox 10+ e IE 10+ admiten backface-visibility sin un prefijo. Opera, Chrome, Safari, iOS y Android necesitan -webkit-backface-visibility .

Tiene 4 valores:

1. visible (predeterminado): el elemento siempre estará visible incluso cuando no esté frente a la pantalla.
2. Oculto : el elemento no es visible cuando no está frente a la pantalla.
3. heredar : la propiedad obtendrá su valor del elemento padre
4. inicial : establece la propiedad en su valor predeterminado, que es visible

Brújula con forma de puntero o aguja mediante transformaciones 3D

CSS

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML

<div class='needle'></div>

En el ejemplo anterior, una forma de puntero de aguja o brújula se crea utilizando transformaciones 3D. Generalmente, cuando aplicamos la transformada de rotate en un elemento, la rotación ocurre solo en el eje Z y, en el mejor de los casos, terminamos solo con formas de diamante. Pero cuando se rotateY una transformada de rotateY en la parte superior, el elemento se comprime en el eje Y y, por lo tanto, se parece a una aguja. Cuanto mayor es la rotación del eje Y, más comprimido se ve el elemento.

La salida del ejemplo anterior sería una aguja que descansa sobre su punta. Para crear una aguja que descansa sobre su base, la rotación debe ser a lo largo del eje X en lugar de a lo largo del eje Y. Entonces, el valor de la propiedad de transform debería ser algo como rotateX(85deg) rotateZ(45deg); .

Este bolígrafo utiliza un enfoque similar para crear algo que se asemeja al logotipo de Safari o un dial de brújula.

Captura de pantalla del elemento sin transformar:

Captura de pantalla del elemento con solo transformada 2D:

Captura de pantalla del elemento con transformación 3D:

Efecto de texto 3D con sombra

HTML:

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

Ver ejemplo con efecto de desplazamiento adicional

En este ejemplo, el texto se transforma para que parezca que va a la pantalla lejos del usuario.

La sombra se transforma en consecuencia para que siga el texto. Como está hecho con un pseudo elemento y el atributo de data , hereda las transformaciones de su padre (la etiqueta H1).

La "luz" blanca se hace con un pseudo elemento en el elemento #title . Está sesgado y utiliza el radio del borde para la esquina redondeada.