一、HTML+CSS制作3D旋转相册
哈哈哈，放寒假啦！又可以好好闭关修炼了，最近，在抽屉里无意中翻到了自己上小学时的照片，太可爱啦，照片我就不贴出来了，于是，我就想着用所学的知识，做一个3D旋转相册吧，本人比较害羞，就没有贴自己的照片啦，照片我随便在网上找的啦！原创不易，欢迎大家点赞和评论，话不多说，先上效果图。
二、效果图如下：
三、结构部分如下：
四、代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>3D旋转</title> <style type="text/css"> *{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: go 45s linear infinite; } #box img{width: 280px; height: 400px; position: absolute; left: 0; top: 0; } #box img:nth-child(1){ transform: rotateY(0deg) translateZ(650px);} #box img:nth-child(2){ transform: rotateY(36deg) translateZ(650px);} #box img:nth-child(3){ transform: rotateY(72deg) translateZ(650px);} #box img:nth-child(4){ transform: rotateY(108deg) translateZ(650px);} #box img:nth-child(5){ transform: rotateY(144deg) translateZ(650px);} #box img:nth-child(6){ transform: rotateY(180deg) translateZ(650px);} #box img:nth-child(7){ transform: rotateY(216deg) translateZ(650px);} #box img:nth-child(8){ transform: rotateY(252deg) translateZ(650px);} #box img:nth-child(9){ transform: rotateY(288deg) translateZ(650px);} #box img:nth-child(10){ transform: rotateY(324deg) translateZ(650px);} @keyframes go { 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);} } </style> </head> <body> <div id="box"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/6.jpg"> <img src="images/7.jpg"> <img src="images/8.jpg"> <img src="images/9.jpg"> <img src="images/10.jpg"> </div> </body> </html>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)