html旋转相册代码

3D旋转相册

*{

padding:0

margin:0

}

body,

html{

height:100%

}

/*背景图片在这里设置*/

body{

background-image:url("images/beijing.jpg")

background-size:100%100%

}

#box{

width:280px

height:400px

position:fixed

left:0

right:0

top:0

bottom:0

margin:auto

transform-style:preserve-3d

transform:rotateX(0deg)rotateY(0deg)

animation:go45slinearinfinite

}

#boximg{

width:280px

height:400px

position:absolute

left:0

top:0

}

#boximg:nth-child(1){

transform:rotateY(0deg)translateZ(650px)

}

#boximg:nth-child(2){

transform:rotateY(36deg)translateZ(650px)

}

#boximg:nth-child(3){

transform:rotateY(72deg)translateZ(650px)

}

#boximg:nth-child(4){

transform:rotateY(108deg)translateZ(650px)

}

#boximg:nth-child(5){

transform:rotateY(144deg)translateZ(650px)

}

#boximg:nth-child(6){

transform:rotateY(180deg)translateZ(650px)

}

#boximg:nth-child(7){

transform:rotateY(216deg)translateZ(650px)

}

#boximg:nth-child(8){

transform:rotateY(252deg)translateZ(650px)

}

#boximg:nth-child(9){

transform:rotateY(288deg)translateZ(650px)

}

#boximg:nth-child(10){

transform:rotateY(324deg)translateZ(650px)

}

@keyframesgo{

0%{

transform:rotateX(0deg)rotateY(0deg)

}

25%{

transform:rotateX(20deg)rotateY(180deg)

}

50%{

transform:rotateX(0deg)rotateY(360deg)

}

75%{

transform:rotateX(-20deg)rotateY(540deg)

}

100%{

transform:rotateX(0deg)rotateY(720deg)

}

}

images/1.jpg

images/2.jpg

images/3.jpg

images/4.jpg

images/5.jpg

images/6.jpg

images/7.jpg

images/8.jpg

images/9.jpg

images/10.jpg

1、实现头的方法代码。

2、编写CSS样式的方法代码。

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项：

JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。