Una forma muy sencilla de rotar los elementos de la página de un sitio web: solo aplique algunos estilos CSS. La familiarización con esta lección le permitirá colocar un abanico de tarjetas desplegado, hojas caídas esparcidas o fotos elegantes en un álbum de la página. La lección contiene un ejemplo de la implementación de un álbum de fotos y tiene en cuenta la solución para todos los navegadores modernos.
Es necesario
Cuatro fotos de hasta 450 px de ancho
Instrucciones
Paso 1
Este ejemplo se centrará en la creación de una elegante página de álbum con fotos rotadas.
Preparé imágenes de antemano (ancho 400px) con direcciones:
En el futuro, asignaremos identificaciones a las imágenes de acuerdo con sus nombres.
Paso 2
Primero, prepararemos un bloque para nuestro álbum de fotos usando la etiqueta div, y también le agregaremos fotos usando la etiqueta img (cada imagen debe estar incluida en su propia etiqueta div), así:
Tenga en cuenta que hemos asignado un identificador al bloque -. Por el identificador, podemos referirnos al bloque usando css.
Paso 3
A continuación, debe configurar los estilos CSS para el bloque. Lista de estilos: "posición: relativa;" - establecerá el origen desde la esquina superior izquierda de nuestro bloque; "margen: 50 px automático;" - establecerá la sangría de nuestro bloque "50px" por encima y por debajo del resto del contenido de la página, así como la sangría automática a derecha e izquierda, alineando así nuestro bloque en el centro; "ancho: 900 px; alto: 650 px;" - establecerá el ancho en 900 px y la altura en 650 px, respectivamente.
La lista de estilos especificada debe colocarse de esta manera:
#photo_page {
posición: relativa;
margen: 0 automático;
ancho: 900px;
altura: 650px;
alineación de texto: centro;
}
Tenga en cuenta el uso de "#photo_page": así es como nos referimos al ID de bloque.
Paso 4
Ahora asignaremos estilos generales para cada imagen dentro del bloque photo_page. Estos son esquinas redondeadas, borde gris, fondo blanco, relleno y sombra paralela.
Esto creará un efecto fotográfico:
#photo_page img {
radio del borde: 7px;
borde: 1px gris sólido;
fondo: #ffffff;
relleno: 10px;
caja de sombra: 2px 2px 10px # 697898;
}
Tenga en cuenta el uso de "#photo_page img": esto se referirá a todas las imágenes dentro del bloque photo_page
Paso 5
También es importante agregar un estilo corto como este:
#photo_page div {
flotador izquierdo;
}
Reduce todos los bloques dentro del bloque photo_page a la izquierda.
Paso 6
Se ha completado la etapa intermedia de la lección. Si su trabajo es similar a la imagen en la captura de pantalla, entonces no se ha equivocado y puede continuar con el siguiente paso.
Paso 7
Ahora pasamos a rotar las fotos publicadas. Para esto necesitamos el estilo de transformación. Por el momento, en su forma pura, no se usa, sino solo con un prefijo para cada navegador al principio, así:
-webkit-transform: rotate (valor);
-moz-transform: rotate (valor);
-o-transform: rotar (valor);
Este es el estilo de rotación para los navegadores: Google Chrome, Mazilla, Opera (respectivamente). En lugar de la palabra "valor", insertaremos un número con grados al final, así:
90 grados: gira 90 grados en el sentido de las agujas del reloj.
-5 grados: gira -5 grados en sentido antihorario.
Etc.
Paso 8
Estilo para foto photo_1:
# photo_1 {
-webkit-transform: rotar (5 grados);
-moz-transform: rotar (5 grados);
-o-transform: rotar (5 grados);
}
La primera imagen se gira 5 grados.
Paso 9
Estilo para la foto photo_2:
# photo_2 {
-webkit-transform: rotar (-3 grados);
-moz-transform: rotar (-3 grados);
-o-transform: rotar (-3 grados);
}
La segunda imagen se gira -3 grados.
Paso 10
Estilo para la foto photo_3:
# photo_3 {
-webkit-transform: rotar (-2deg);
-moz-transform: rotar (-2deg);
-o-transformar: rotar (-2 grados);
}
La tercera imagen se gira -2 grados.
Paso 11
Estilo para la foto photo_4:
# photo_4 {
-webkit-transform: rotar (8 grados);
-moz-transform: rotar (8 grados);
-o-transform: rotar (8 grados);
}
La cuarta imagen se gira 8 grados.
Paso 12
Veamos cómo puedes corregir la posición de las imágenes. Por ejemplo, desea compensar la primera imagen 20px desde la parte superior y 10px desde la izquierda. En este caso, debe utilizar el estilo de margen. Aquí está la forma correcta de usarlo para nuestro caso:
# photo_1 {
margen: 20px -10px -20px 10px;
-webkit-transform: rotar (5 grados);
-moz-transform: rotar (5 grados);
-o-transform: rotar (5 grados);
}
Tenga en cuenta que el primer valor del estilo es el margen superior; el segundo es la sangría a la derecha; el tercero es una sangría desde la parte inferior; cuarto - sangría izquierda.
Importante: en nuestro caso, el margen inferior es igual al valor negativo del margen superior. Si ve un espacio en blanco debajo de la imagen en su página, intente sangrar la parte inferior de la imagen de manera aún más negativa.
Paso 13
El trabajo está completo, proporciono una captura de pantalla (teniendo en cuenta el cambio en la sangría de la primera imagen descrita en el Paso 12).
Agregue un estilo de sangría a cualquier imagen que no esté en la posición adecuada para usted.
