制作一个简单3D相册

article/2025/10/12 12:43:16

- 用到的点：

旋转
- 2D 旋转
  transform: rotate(值deg) deg 角度的单位
- 3D 旋转
  
  transform:rotateX rotateY roteteZ
  如果让一个块实现3D效果，必须做两件事：
  1、在要实现3D效果的块上加transform-style:preserve-3D (声明)
  2、在要实现3D效果的块的父元素上加一个镜头的距离
  一般范围为（800~1200px）
  用法：perspective:800px~1200px;
  平移：transform:translateX(0px) translateY() translateZ()
背景图
background:url(‘图片的路径’)
什么都不设置的话，图片小于边框大小，会出现平铺现象，要使图片不平铺的话，

background:url(‘图片的路径’) no- repeat(不平铺)
repeat-x 只沿X轴平铺
repeat-y 只沿Y轴平铺

background-size:200px 500px；设置背景图大小但是可能会使图片失帧。

效果图：
在这里插入图片描述

    <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 去掉浏览器自动的边距 */*{margin: 0;padding: 0;}/* 整个背景设置为全黑 */body{background-color: #000;}/* 设置照片的大小，及居中到浏览器 */.wrap{width: 133px;height: 200px;margin: 200px auto; /* 添加一个3D镜头 */perspective:1200px; }/* 设置里面所有照片的大小 及相对位置*/.content{height: 100%;position: relative;/* 声明 3D样式 */transform-style:preserve-3d;transform: rotateX(-12deg);}/* 设置各个单独照片的大小、相对位置、阴影等样式 */.content>div{width:100%;height: 100%;position: absolute;top: 0;left: 0;box-shadow: 1px 1px 10px rgb(248, 142, 216);border-radius: 7px;/* 添加一个倒影 */-webkit-box-reflect: below 10px;}/* 添加一个底 并设置样式 */.content .di{width: 800px;height: 800px;position:absolute;top: 100%;left: 50%;margin-left: -400px;margin-top: -400px;border-radius: 400px;transform: rotateX(90deg);background:-webkit-radial-gradient(center center , 400px 400px ,rgba(247, 60, 175,1), rgba(0,0,0,0) );}</style></head><body><div class="wrap"><div class="content"><p class="di"></p></div></div></body><script src="jquery.min.js"></script><script>  // 入口函数  $(function(){// 调用方法creatediv();let xdeg=-12;let ydeg=0;// 添加一个鼠标移动事件$(document).mousedown(function(event){//鼠标按下，打开开关let flag = true;   //记录鼠标按下时刻 X轴 Y轴的 坐标let stratx = event.pageX||event.clientX;let straty = event.pageY||event.clientY;// 添加鼠标移动事件$(document).mousemove(function(ev){// 当开关为 ture 时 生效if(flag){//读取鼠标当前的位置let movex = ev.pageX||ev.clientX;let movey = ev.pageY||ev.clientY;// 计算旋转的角度 xdeg = xdeg + (movey-straty)*0.1;ydeg = ydeg + (movex-stratx)*0.1;// 旋转 平移 各个照片$(".content").css({"transform":"rotateX("+xdeg+"deg) rotateY("+ydeg+"deg)"});// 初始化 鼠标的位置stratx = movex;straty = movey;}//当鼠标放开时，结束事件}).mouseup(function(){flag = false;});});// 创建一个方法 导入所有的图片 并设置样式function creatediv(){// 利用for 循环 依次导入11 张图片   //这里图片的命名是有顺序的 分别为 1.jpf 2.jpg 3.jpg...for(let i=1;i<=11;i++){let $div=$("<div></div>");// 计算旋转的角度let r = 360/11*(i-1);let time = (i-1)*0.3;// 导入图片//  第一个样式 图片全部重叠在中心$div.css({"background":"url(img/"+i+".jpg)",});// 将所有图片导入到 div 标签中$(".content").append($div);//  setTimeout(function() 设置样式的发生顺序   //  这里是第一个样式发生后 100ms  后再发生第二个setTimeout(function(){// 第二个样式  图片均匀分散。$div.css({"transform":"rotateY("+r+"deg) translateZ(400PX)","transition":"1s "+time+"s",},100)});}}});</script></html>