用HTML+CSS代码制作3D旋转相册

对于很多小伙伴给我的留言问题,我详细总结一下

一、我的项目文件目录

图片全部存放在images文件夹下,你把自己需要显示的图片放在images文件夹下就可以了,一共是11张图片,一张背景图
我的图片命名为1.jpg,2.jpg……,可以自己更改图片名字,代码里也需要修改为自己的图片名字哦

在这里插入图片描述

二、index文件代码如下:(最后有百度网盘链接)

<!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>

三、运行效果图:

在这里插入图片描述

四、打包运行:

有小伙伴想打包为APP的可以使用Hbuilder打包传到手机上,详细看下面教程
https://blog.csdn.net/qq_42259469/article/details/84646570?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158600294919195162559101%2522%252C%2522scm%2522%253A%252220140713.130056874…%2522%257D&request_id=158600294919195162559101&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-all_SOOPENSEARCH-1

五、百度网盘下载

链接: https://pan.baidu.com/s/1KrmOu-DVCN4kOSy_pPmvUw 提取码: yef9

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页