Jugando con Css: Libro en 3D 23.5.12
Jugando con Css: Libro en 3D
Sólo un juego y divertimento con Css y las propiedades del grupo transform. A la derecha el jpg de lo que intento reproducir con Css. Abajo el resultado.
Los juguetes: las propiedades Css del grupo transform, tanto las de 2D como 3D, una pizca de sombras Css y un gradiente Css.
Es todo lo que se necesita.
Etiquetado html
Lo primero de todo, crear el etiquetado html. Estará constituido por la imagen de la portada y un div para alojarla. Al final decidí añadir un span vacío para la pequeña sombra que proyecta el libro:
<div class="libro">
<span></span>
<img src="libro1d.jpg" alt="" />
</div>
Propiedades Css
Lo primero es estilizar la caja ".libro". Las medidas coinciden con las de la imagen utilizada, así posteriormente nos evitamos trabajo al crear el canto y tapa posterior del libro.
.libro {
width: 276px;
height: 375px;
position: relative;
perspective: 150px;
perspective-origin: right center;
transform-style: preserve-3d;
Para ver qué hace cada una de las propiedades del grupo de las transform te remito al artículo "CSS3: Transform 3D. Guia de inicio y uso".
Ahora es el momento de trabajar la imagen para deformarla y darle la apariencia trapezoidal.
.libro img {
display: block;
height: 375px;
width: 276px;
position: absolute;
z-index:5;
transform: rotateY(-4deg) translateZ(0px);
}
El resultado es el que ves en la imagen. Al div .libro le he añadido un fondo sólo para que sea visible en la imagen. Como ves, las propiedades trasnform declaradas en él no le afectan, sino que preparan y hacen posible la transformación de su contenido, en este caso de la imagen.
Siguiente paso. La creación y estilizado del canto y contraportada del libro.
Para lograrlos sin necesidad de añadir nada en el html recurrimos a los pseudoelementos ::before y ::after
.libro::before, .libro::after {
content: '';
position: absolute;
}
En este juego ::after será el canto de las hojas blancas del libro. Lo posicionamos en su lugar con un tamaño adecuado, para hacerlo visible aplicamos un fondo y una sombra y lo deformamos ligéramente para darle apariencia 3D junto:
.libro::after {
background: #F5F5F5;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 18px 3px 20px rgba(0, 0, 0, 0.25) inset;
height: 98%;
width: 30px;
right: -19px;
top: 1%;
z-index: 3;
perspective: 5px;
transform: rotateY(20deg) translateZ(5px);
}
Y lo mismo para la tapa posterior del libro con ::before Con estos pasos ya vemos el libro puro Css en 3D. Con su perspectiva, su lateral y contraportada, tal como ves en la imagen de la derecha. Eso sí, sus proporciones ancho/alto no terminan de ser las deseadas. Pero es un detalle menor que corregiremos a después de mostrarte el css declarado en el pseudoelemento ::before
.libro:before {
height: 100%;
width: 40px;
position: absolute;
right: -25px;
top: 0%;
background: #89221B;
z-index: 2;
transform: rotateY(-4deg) translateZ(0px);
}
Detalles finales
Con los pasos anteriores podríamos dar por terminado el juego, pero vamos a por el puntito final. Variamos ligéramente la apariencia del libro añadiendo un escalado al div ".libro". Para ello damos valores sensíblemente diferentes al escalado de la altura y anchura.
.libro {
transform: scaleX(0.88) scaleY(0.95);
}
Y para terminar creamos la sombra que arroja el libro a su espalda. Para ello el span que te mencioné al inicio con las siguiente declaración:
.libro span {
display: block;
position: absolute;
bottom: -13px;
height: 100px;
right: -110px;
height: 100px;
width: 200px;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
border-radius: 15px;
box-shadow: 5px 12px 15px 5px rgba(0, 0, 0, 0.1);
transform: rotate(5deg) skew(-35deg);
}
Y la imagen del resultado final, como la muestra firefox:
Y así es cómo lo muestran los distintos navegadores:
El libro 3D en puro Css
Y como no puede haber tutorial en Css por pequeño que sea sin adjuntar el resultado, aquí va:
Enlace a la Demo
Y abajo el libro en 3D:
See the Pen Libro 3D Css // Css 3D book by Kseso (@Kseso) on CodePen.
El libro en vivo, por si falla Codepen:
Todo el css utilizado
Incluidos los prefijos privativos:
.libro {
width: 276px;
height: 375px;
-moz-transform: scaleX(0.88) scaleY(0.95);
-moz-perspective: 150px;
-moz-perspective-origin: right center;
-webkit-perspective: 150px;
-webkit-perspective-origin: right center;
-webkit-transform-style: preserve-3d;
-webkit-transform: scaleX(0.88) scaleY(0.95);
-o-perspective: 150px;
-o-perspective-origin: right center;
-o-transform-style: preserve-3d;
-o-transform: scaleX(0.88) scaleY(0.95);
-ms-perspective: 150px;
-ms-perspective-origin: right center;
-ms-transform-style: preserve-3d;
-ms-transform: scaleX(0.88) scaleY(0.95);
perspective: 150px;
perspective-origin: right center;
transform-style: preserve-3d;
transform: scaleX(0.88) scaleY(0.95);
}
.libro img {
display: block;
height: 375px;
width: 276px;
position: absolute;
z-index:5;
-moz-transform: rotateY(-4deg) translateZ(0px);
-webkit-transform: rotateY(-4deg) translateZ(0px);
-o-transform: rotateY(-4deg) translateZ(0px);
-ms-transform: rotateY(-4deg) translateZ(0px);
transform: rotateY(-4deg) translateZ(0px);
padding: 0; margin: 0; border: 0 none; max-width: 100%; box-shadow: none;/*para pisar los herencias de la página*/
}
.libro:before, .libro:after {
content: '';
position: absolute;
}
.libro:before {
height: 100%;
width: 40px;
position: absolute;
right: -25px;
top: 0%;
background: #89221B;
z-index: 2;
-moz-transform: rotateY(-4deg) translateZ(0px);
-webkit-transform: rotateY(-4deg) translateZ(0px);
-o-transform: rotateY(-4deg) translateZ(0px);
-ms-transform: rotateY(-4deg) translateZ(0px);
transform: rotateY(-4deg) translateZ(0px);
}
.libro:after {
background: #F5F5F5;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 18px 3px 20px rgba(0, 0, 0, 0.25) inset;
height: 98%;
width: 30px;
right: -19px;
top: 1%;
z-index: 3;
-moz-perspective: 5px;
-moz-transform: rotateY(20deg) translateZ(5px);
-webkit-perspective: 5px;
-webkit-transform: rotateY(20deg) translateZ(5px);
-o-perspective: 5px;
-o-transform: rotateY(20deg) translateZ(5px);
-ms-perspective: 5px;
-ms-transform: rotateY(20deg) translateZ(5px);
perspective: 5px;
transform: rotateY(20deg) translateZ(5px);
}
.libro span.sombra {
display: block;
position: absolute;
bottom: -13px;
height: 100px;
right: -110px;
height: 100px;
width: 200px;
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
border-radius: 15px;
box-shadow: 5px 12px 15px 5px rgba(0, 0, 0, 0.1);
-moz-transform: rotate(5deg) skew(-65deg);
-webkit-transform: rotate(5deg) skew(-35deg);
-o-transform: rotate(5deg) skew(-35deg);
-ms-transform: rotate(5deg) skew(-35deg);
transform: rotate(5deg) skew(-35deg);
}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso