Cómo agregar varias imágenes de fondo y rotar objetos con css3

Con CSS3, puede agregar fácilmente como muchas imágenes de fondo a cualquier elemento a su gusto. También puede girar imágenes. La ilustración muestra un ejemplo de un recipiente con tres imágenes de fondo, un patrón, y dos archivos PNG con transparencia.

La forma más sencilla de añadir varias imágenes es separar cada uno por una coma, asegurándose de colocar la imagen que desea estar en la posición más alta primero y todas las demás imágenes por debajo de ella en el orden de apilamiento deseada:

Video: HTML5 y CSS3 Como hacer que una imagen u obejeto gire 360 grados [Transform]

.box {/ * repliegue * / background: url (bg-full.jpg) arriba a la izquierda no-repeat - / * navegadores modernos * / background: url (bg-top.jpg) arriba a la izquierda no-repeat, url (bg-inferior .jpg) inferior derecha no-repeat, url (bg-middle.jpg) dejó de repetición-x}

Como un mensaje para navegadores antiguos, puede incluir una sola imagen que tiene todos los elementos combinados de sus imágenes separadas en la parte superior del bloque de estilo, como se ha señalado aquí por el /* retroceder */ los comentarios. Este método asegura que los navegadores antiguos muestran la primera imagen e ignoran el resto.

Como diseñador de páginas web, una de las formas de agregar algún interés para su diseño 2D es de romper con la estructura lineal de la red mediante la rotación de un objeto en el espacio. Con CSS3, puede girar sin esfuerzo un objeto mediante la aplicación de la transform: gire estilo a cualquier objeto:

.gire {transform: rotate (-4deg) - webkit-transform: rotate (-4deg) - / * Safari y Chrome * / - moz-transform: rotate (-4deg) - / * Firefox * / - o-transform: gire (-4deg) - / * Opera * /}

Los objetos se pueden girar en sentido horario (4deg) O hacia la izquierda (-4deg). También puede escalar y sesgar un objeto con el escala() y sesgar() transformar los métodos mediante la especificación de valores numéricos o grados para el eje X y el eje Y:

div {transformar: Escala (3,6) - MS-transform: escala (3,6) - / * IE 9 * / - webkit-transform: escala (3,6) - / * Safari y Chrome * / - O -transform: escala (3,6) - / * Opera * / - moz-transform: escala (3,6) - / * Firefox * /} {div transformar: inclinación (10 grados, 20deg) - MS-transform: oblicua (10 grados, 20deg) - / * IE 9 * / - webkit-transform: inclinación (10 grados, 20deg) - / * Safari y Chrome * / - o-transform: inclinación (10 grados, 20deg) - / * Opera * / - MOZ -transform: inclinación (10 grados, 20deg) - / * Firefox * /}