código de álbum giratorio html
Álbum de rotación 3D
*{
padding: 0;
margen: 0;
}
cuerpo,
html{
altura: 100;
}
/* La imagen de fondo se establece aquí**
cuerpo{
imagen de fondo: url("images/beijing.jpg");
tamaño de fondo: 100 100;
}
#box{
ancho: 280px
alto:
; posición: fijo;
izquierda:
derecha:
arriba:
abajo:
p >margen: auto;
estilo de transformación: preservar-3d
transformar: rotarX(0deg)rotarY(0deg); . go45slinearinfinite;
}
#boximg{
ancho: 280px;
alto: 400px; posición: absoluta;
izquierda: 0
arriba: 0
}
#boximg:nth-child(1) {
transformar：rotateY(0deg)translateZ(650px
}
#boximg：nth-child(2){
}
#boximg: nth-child(3){
Transformar: rotarY(72deg) traducirZ (650px);
Transformar: rotarY(72deg)translateZ(650px);
}
}
#boximg:nth); - niño(4){
transformar：rotarY(108deg)translateZ(650px
}
#boximg：nth-child(5){< / p>
transformar: rotarY(180deg)translateZ(650px);
}
#boximg:nth-child(7){
transformar:rotarY(216deg)translateZ(650px);
}
#boximg:nth-child(8){
transformar:rotarY( 252 grados )translateZ(650px);
}
#boximg： nth-child(9){
transformar：rotateY(288deg)translateZ(650px);
}
#
boximg: nth-child(10){
transformar: rotarY(324deg)translateZ(650px);
}
@keyframesgo{
0{
transformar: rotarX(0deg)rotarY(0deg);
}
25{
transformar: rotarX( 20 grados)rotarY(180deg);
}
50{
transformar: rotarX(0deg)rotarY(360deg);
75{
transformar: rotarX(-20deg)rotarY(540deg
}
100{
<); p>transformar: rotarX(0deg)rotarY(720deg);}
}
images/1.jpg
images/ 2.jpg
imagenes/3.jpg
imagenes/4 .jpg
imagenes/5.jpg
imagenes/6. jpg
imagenes/7.jpg
imagenes/8.jpg
imagenes/9.jpg
imagenes/10.jpg