Hay varias formas de rotar imágenes en un sitio web, a través de un lenguaje de programación como Python o Ruby, o usando CSS. Puede usar transformaciones CSS para rotar una imagen en un eje de 360 grados, como en el ejemplo de su plano. Para rotar la imagen, debe especificar los grados de rotación. También puede especificar el eje para rotar (X, Y, Z).
#myDiv {
transformar: rotar (### deg)
}
– donde ### representa el número de grados en el eje de 360 grados.
- ¿Cómo gana alguien de un sitio web gratuito?
- ¿Qué hacen realmente los sitios de revisión de aplicaciones? ¿Cuáles son los propósitos de este tipo de sitios web?
- ¿Cuál es el sitio web de tutoría más popular?
- Si estoy tratando de crear un sitio web pequeño para noticias, artículos, encuestas, etc. con WordPress, ¿es aconsejable utilizar el nivel gratuito de Amazon AWS?
- Cómo arreglar mi sitio web para que cuando las personas creen sus cuentas, el sitio web guarde la información del usuario y las actualizaciones
Para las rotaciones de imágenes dirigidas por el mouse / cursor por los usuarios, los codificadores en su ejemplo usaron una combinación de código Div, Div Class, Transform y Reel-Container que especifica la posición, el ancho y la altura en píxeles y grados de rotación. Por ejemplo:
… .. * /
.reel-container {
posición: relativa;
margen: 0 automático;
ancho máximo: 960px;
ancho min: 320px;
relleno inferior: 100px; }
.reel-container: antes de {
contenido: “”;
bloqueo de pantalla;
ancho: 100%;
acolchado: 44.4791666667%; }
.reel-container .reel-inner {
posición: absoluta;
arriba: 0;
izquierda: 0;
derecha: 0;
abajo: 0; }
.reel-container img {
ancho: 100%;
altura: auto; } … ..
El uso de .circle-parent p seguido de los atributos de posición y .circle-parent p-after proporciona instrucciones sobre cómo debe mostrarse la página. Por ejemplo:
.reel-container .circle-parent p {
posición: absoluta;
arriba: -5px;
izquierda: 0;
ancho: 100%;
índice z: 6;
tamaño de fuente: 12px;
peso de fuente: negrita;
color: # 969CA0;
alinear texto: centro;
-webkit-font-smoothing: antialiased; }
.reel-container .circle-parent p: después de {
contenido: “”;
background-image: url (../ images / 360-icon.png);
ancho: 27px;
altura: 27px;
posición: absoluta;
izquierda: 50%;
margen izquierdo: -13.5px;
arriba: 23px; }
.reel-container .plane {
/ * opacidad: 0; * /}
.reel-container .plane .image {
posición: relativa;
índice z: 10;
relleno inferior: 30px;
ancho: 100%! importante;
altura: auto! importante; }
Para lograr este efecto se requiere experiencia en codificación. Si no tiene la experiencia de programación para comprender el proceso a fondo, intente encontrar un socio. Para ayudarlo a comenzar, aquí hay algunos recursos sobre la rotación de imágenes CSS.
Gracias al equipo web de Boeing por los ejemplos de código.
