制作一个简单3D相册

- 用到的点：

旋转
- 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>

制作一个简单3D相册相关推荐

使用solidworks2018制作一个简单的装配体
这两天学习使用solidworks2018制作一个简单的装配体. 估计大多数像我一样的初学者都想最快速度制作一个装配体来感受一下solidworks的强大. 那么今天我把自己做的第一个装配体的步骤分享 ...
使用 Flutter 制作一个简单的笑话生成器应用程序
在本教程中,我将向您展示如何使用 Flutter 制作一个简单的笑话生成器应用程序对于这个项目,我们将从 RESTful API 获取数据 API的链接: 随机笑话对于这个项目,我不会关注应用程序 ...
实例学习SSIS（一）--制作一个简单的ETL包
http://www.cnblogs.com/tenghoo/archive/2009/10/archive/2009/10/archive/2009/10/16/ssis_lookup.html 导 ...
python计算器教程,用Python程序制作一个简单的计算器
用Python程序制作一个简单的计算器在此示例中,您将学习创建一个简单的计算器,该计算器可以根据用户的输入进行加,减,乘或除. 要理解此示例,您应该了解以下Python编程主题: 通过函数创建简单计 ...
32位mips运算器logisim_大神教你制作一个简单的16位CPU
如何制作一个简单的16位CPU,首先我们要明确CPU是做什么的,想必各位都比我清楚,百度的资料也很全..... 如果想要制作一个CPU,首先得明白下计算机的组成结构(或者计算机的替代品,因为并不是只有 ...
（译）如何使用GameCenter制作一个简单的多人游戏教程：第一部分
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
数字信号 fft c源码_如何制作一个简单的人体动态识别微信小程序（附源码）
知乎小白第一次写专栏,还请多指教. 先放成果. GitHub源码: lrioxh/HAR-applet-of-Wechatgithub.com b站演示视频: 居然不需要服务器?!如何制作一个简单的 ...
用计算机制作动画,如何使用制作工具制作一个简单的Flash动画-电脑自学网
怎么制作Flash动画?通过Adobe Flash我们可以制作出非常有趣好看的动画,也可以制作一键简单的小动画,下面给大家介绍如何使用制作工具制作一个简单的Flash动画. 操作方法: 1.打开fla ...
制作一个简单的Chrome extensions并发布到应用商店
制作一个简单的Chrome extensions并发布到应用商店制作一个简单的Chrome extensions并发布到谷歌商店一个简单的ShowTime extension 注:工具推荐使用VS ...

制作一个简单3D相册

制作一个简单3D相册相关推荐

最新文章

热门文章