{ margen: 0; acolchado: 0; de caja de tamaño : frontera-box; } cuerpo { imagen de fondo : url (../image/fondo.jpg); posición de fondo : centro; repetición de fondo : no repetición; tamaño de fondo : 330 vh ; } h2 { alineación de texto : centro; tamaño de fuente : 40 px ; familia de fuentes : arial; margen superior : 80 px ; color : aguamarina; sombra de texto : 0 px 0 px 6 px negro; } . content-all { ancho : 210 px ; margen : automático; perspectiva : 800 px ; posición : relativa; margen superior : 50 px ; } . content-carrousel1.css { ancho : 100 % ; posición : absoluta; animación : rotar 10 s infinito lineal; estilo de transformación : preserve-3d; } . content-carrousel : hover { estado de reproducción de animación : en pausa; cursor : puntero; } . figura de carrusel de contenido { ancho : 100 % ; altura : 120 px ; desbordamiento : oculto; posición : absoluta; caja-sombra : 0 px 0 px 20 px 0 px negro; transición : todos los 300 ms ; } . figura de carrusel de contenido : hover { caja-sombra : 0 px 0 px 0 px 0 px negro; transición : todos los 300 ms ; } . figura del carrusel de contenido : nth-child ( 1 ) { transform : rotateY ( 0 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 2 ) { transform : rotateY ( 40 grados ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 3 ) { transform : rotateY ( 80 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 4 ) { transform : rotateY ( 120 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : n Carrusel 3D

Carrusel Magtimus

{ margen : 0 ; acolchado : 0 ; de caja de tamaño : frontera-box; } cuerpo { imagen de fondo : url (.. / image / fondo.jpg); posición de fondo : centro; repetición de fondo : no repetición; tamaño de fondo : 330 vh ; } h2 { alineación de texto : centro; tamaño de fuente : 40 px ; familia de fuentes : arial; margen superior : 80 px ; color : aguamarina; sombra de texto : 0 px 0 px 6 px negro; } . content-all { ancho : 210 px ; margen : automático; perspectiva : 800 px ; posición : relativa; margen superior : 50 px ; } . content-carrousel { ancho : 100 % ; posición : absoluta; animación : rotar 10 s infinito lineal; estilo de transformación : preserve-3d; } . content-carrousel : hover { estado de reproducción de animación : en pausa; cursor : puntero; } . figura de carrusel de contenido { ancho : 100 % ; altura : 120 px ; desbordamiento : oculto; posición : absoluta; caja-sombra : 0 px 0 px 20 px 0 px negro; transición : todos los 300 ms ; } . figura de carrusel de contenido : hover { caja-sombra : 0 px 0 px 0 px 0 px negro; transición : todos los 300 ms ; } . figura del carrusel de contenido : nth-child ( 1 ) { transform : rotateY ( 0 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 2 ) { transform : rotateY ( 40 grados ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 3 ) { transform : rotateY ( 80 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 4 ) { transform : rotateY ( 120 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 5 ) { transform : rotateY ( 160 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 6 ) { transform : rotateY ( 200 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 7 ) { transform : rotateY ( 240 deg ) translateZ ( 300 px );} . figura de carrusel de contenido : nth-child ( 8 ) { transform : rotateY ( 280 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 9 ) { transform : rotateY ( 320 deg ) translateZ ( 300 px );} . figura del carrusel de contenido : nth-child ( 10 ) { transform : rotateY ( 360 deg ) translateZ ( 300 px );} . content-carrousel img { ancho : 100 % ; transición : todos los 300 ms ; } . content-carrousel img : hover { transformar : escala ( 1.2 ); transición : todos los 300 ms ; } @keyframes rotar { de { transformar : rotateY ( 0 grados ); } a { transformar : rotarY ( 360 grados ); } }