抖音上火爆的3D旋转相册代码，纯H5写出来效果是这样的：

鼠标移动上去裂变。

直接上代码

css部分：html{

background:linear-gradient(#FF6666 0%,#336699 20%);/*背景渐变颜色*/

height: 100%;

color:#99cc33;/*文字颜色*/

}

/*最外层容器样式*/

.wrap{

width: 200px;

height: 200px;

/*改变左右上下,图片方块移动*/

margin: 150px auto;

position: relative;

}

/*包裹所有容器样式*/

.cube{

width: 200px;

height: 200px;

margin: 0 auto;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

-webkit-animation: rotate 20s infinite;

/*匀速*/

animation-timing-function: linear;

}

@-webkit-keyframes rotate{

from{transform: rotateX(0deg) rotateY(0deg);}

to{transform: rotateX(360deg) rotateY(360deg);}

}

.cube div{

position: absolute;

width: 200px;

height: 200px;

opacity: 0.8;

transition: all .4s;

}

/*定义所有图片样式*/

.pic{

width: 200px;

height: 200px;

}

.cube .out_front{

transform: rotateY(0deg) translateZ(100px);

}

.cube .out_back{

transform: translateZ(-100px) rotateY(180deg);

}

.cube .out_left{

transform: rotateY(90deg) translateZ(100px);

}

.cube .out_right{

transform: rotateY(-90deg) translateZ(100px);

}

.cube .out_top{

transform: rotateX(90deg) translateZ(100px);

}

.cube .out_bottom{

transform: rotateX(-90deg) translateZ(100px);

}

/*定义小正方体样式

*/

.cube span{

display: bloack;

width: 100px;

height: 100px;

position: absolute;

top: 50px;

left: 50px;

}

.cube .in_pic{

width: 100px;

height: 100px;

}

.cube .in_front{

transform: rotateY(0deg) translateZ(50px);

}

.cube .in_back{

transform: translateZ(-50px) rotateY(180deg);

}

.cube .in_left{

transform: rotateY(90deg) translateZ(50px);

}

.cube .in_right{

transform: rotateY(-90deg) translateZ(50px);

}

.cube .in_top{

transform: rotateX(90deg) translateZ(50px);

}

.cube .in_bottom{

transform: rotateX(-90deg) translateZ(50px);

}

/*鼠标移入后样式*/

.cube:hover .out_front{

transform: rotateY(0deg) translateZ(200px);

}

.cube:hover .out_back{

transform: translateZ(-200px) rotateY(180deg);

}

.cube:hover .out_left{

transform: rotateY(90deg) translateZ(200px);

}

.cube:hover .out_right{

transform: rotateY(-90deg) translateZ(200px);

}

.cube:hover .out_top{

transform: rotateX(90deg) translateZ(200px);

}

.cube:hover .out_bottom{

transform: rotateX(-90deg) translateZ(200px);

}

.hovertreeinfo{text-align:center;}

.hovertreeinfo a{color:white}

html部分：html>

3D图片展览屋-抖音女朋友相册代码

html

{

overflow:visible;

-ms-touch-action: none;

-ms-content-zooming: none;

}

body

{

position: absolute;

margin: 0px;

padding: 0px;

background: #fff;

width: 100%;

height: 100%;

}

#canvas

{

position: absolute;

width: 100%;

height: 100%;

background: #fff;

}

/*

* ==============================================================

* CANVAS 3D experiment -

* http://keleyi.com/

* Author Gerard Ferrandez - 7 June 2010

* ------------------------------------------------------------

* Javascript released under the MIT license

* http://keleyi.com

* Last updated: 12 Dec 2012

* ===============================================================

*/

"use strict";

(function () {

/* ==== definitions ==== */

var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1, 2],

// ---- poly constructor ----

Poly = function (parent, face) {

this.parent = parent;

this.ctx = ctx;

this.color = face.fill || false;

this.points = [];

if (!face.img) {

// ---- create points ----

for (var i = 0; i

this.points[i] = new ge1doot.transform3D.Point(

parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),

parent.pc.y + face.y[i],

parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)

);

}

this.points[3].next = false;

}

},

// ---- diapo constructor ----

Diapo = function (path, img, structure) {

// ---- create image ----

this.img = new ge1doot.transform3D.Image(

this, path + img.img, 1, {

isLoaded: function (img) {

img.parent.isLoaded = true;

img.parent.loaded(img);

}

}

);

this.visible = false;

this.normalX = img.nx;

this.normalZ = img.nz;

// ---- point center ----

this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);

// ---- target positions ----

this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);

this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);

// ---- create polygons ----

this.poly = [];

for (var i = -1, p; p = structure[++i]; ) {

layers[i] = (p.img === true ? 1 : 2);

this.poly.push(

new Poly(this, p)

);

}

},

// ---- init section ----

init = function (json) {

// draw poly primitive

Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;

// ---- init screen ----

scr = new ge1doot.Screen({

container: "canvas"

});

ctx = scr.ctx;

scr.resize();

// ---- init pointer ----

pointer = new ge1doot.Pointer({

tap: function () {

if (camera.over) {

if (camera.over === camera.target.elem) {

// ---- return to the center ----

camera.target.x = 0;

camera.target.z = 0;

camera.target.elem = false;

} else {

// ---- goto diapo ----

camera.target.elem = camera.over;

camera.target.x = camera.over.tx;

camera.target.z = camera.over.tz;

// ---- adapt tesselation level to distance ----

for (var i = 0, d; d = diapo[i++]; ) {

var dx = camera.target.x - d.pc.x;

var dz = camera.target.z - d.pc.z;

var dist = Math.sqrt(dx * dx + dz * dz);

var lev = (dist > 1500) ? quality[0] : quality[1];

d.img.setLevel(lev);

}

}

}

}

});

// ---- init camera ----

camera = new ge1doot.transform3D.Camera({

focalLength: Math.sqrt(scr.width) * 10,

easeTranslation: 0.025,

easeRotation: 0.06,

disableRz: true

}, {

move: function () {

this.over = false;

// ---- rotation ----

if (pointer.isDraging) {

this.target.elem = false;

this.target.ry = -pointer.Xi * 0.01;

this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);

} else {

if (this.target.elem) {

this.target.ry = Math.atan2(

this.target.elem.pc.x - this.x,

this.target.elem.pc.z - this.z

);

}

}

this.target.rx *= 0.9;

}

});

camera.z = -10000;

camera.py = 0;

// ---- create images ----

for (var i = 0, img; img = json.imgdata[i++]; ) {

diapo.push(

new Diapo(

json.options.imagesPath,

img,

json.structure

)

);

}

// ---- start engine ---- >>>

setInterval(function () {

quality = (fps > 50) ? [2, 3] : [1, 2];

fps = 0;

}, 1000);

run();

},

// ---- main loop ----

run = function () {

// ---- clear screen ----

ctx.clearRect(0, 0, scr.width, scr.height);

// ---- camera ----

camera.move();

// ---- draw layers ----

for (var k = -1, l; l = layers[++k]; ) {

light = false;

for (var i = 0, d; d = diapo[i++]; ) {

(l === 1 && d.draw()) ||

(d.visible && d.poly[k].draw());

}

}

// ---- cursor ----

if (camera.over && !pointer.isDraging) {

scr.setCursor("pointer");

} else {

scr.setCursor("move");

}

// ---- loop ----

fps++;

requestAnimFrame(run);

};

/* ==== prototypes ==== */

Poly.prototype.draw = function () {

// ---- color light ----

var c = this.color;

if (c.light || !light) {

var s = c.light ? this.parent.light : 1;

// ---- rgba color ----

light = "rgba(" +

Math.round(c.r * s) + "," +

Math.round(c.g * s) + "," +

Math.round(c.b * s) + "," + (c.a || 1) + ")";

ctx.fillStyle = light;

}

// ---- paint poly ----

if (!c.light || this.parent.light

// ---- projection ----

for (

var i = 0;

this.points[i++].projection();

);

this.drawPoly();

ctx.fill();

}

}

/* ==== image onload ==== */

Diapo.prototype.loaded = function (img) {

// ---- create points ----

var d = [-1, 1, 1, -1, 1, 1, -1, -1];

var w = img.texture.width * 0.5;

var h = img.texture.height * 0.5;

for (var i = 0; i

img.points[i] = new ge1doot.transform3D.Point(

this.pc.x + (w * this.normalZ * d[i]),

this.pc.y + (h * d[i + 4]),

this.pc.z + (w * this.normalX * d[i])

);

}

}

/* ==== images draw ==== */

Diapo.prototype.draw = function () {

// ---- visibility ----

this.pc.projection();

if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {

// ---- light ----

this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;

// ---- draw image ----

this.visible = true;

this.img.draw();

// ---- test pointer inside ----

if (pointer.hasMoved || pointer.isDown) {

if (

this.img.isPointerInside(

pointer.X,

pointer.Y

)

) camera.over = this;

}

} else this.visible = false;

return true;

}

return {

// --- load data ----

load: function (data) {

window.addEventListener('load', function () {

ge1doot.loadJS(

"res/imageTransform3D.js",

init, data

);

}, false);

}

}

})().load({

imgdata: [

// north

{img: 'imgs/1.jpg', x: -1000, y: 0, z: 1500, nx: 0, nz: 1 },

{ img: 'imgs/2.jpg', x: 0, y: 0, z: 1500, nx: 0, nz: 1 },

{ img: 'imgs/3.jpg', x: 1000, y: 0, z: 1500, nx: 0, nz: 1 },

// east

{img: 'imgs/4.jpg', x: 1500, y: 0, z: 1000, nx: -1, nz: 0 },

{ img: 'imgs/5.jpg', x: 1500, y: 0, z: 0, nx: -1, nz: 0 },

{ img: 'imgs/6.jpg', x: 1500, y: 0, z: -1000, nx: -1, nz: 0 },

// south

{img: 'imgs/7.jpg', x: 1000, y: 0, z: -1500, nx: 0, nz: -1 },

{ img: 'imgs/8.jpg', x: 0, y: 0, z: -1500, nx: 0, nz: -1 },

{ img: 'imgs/9.jpg', x: -1000, y: 0, z: -1500, nx: 0, nz: -1 },

// west

{img: 'imgs/10.jpg', x: -1500, y: 0, z: -1000, nx: 1, nz: 0 },

{ img: 'imgs/11.jpg', x: -1500, y: 0, z: 0, nx: 1, nz: 0 },

{ img: 'imgs/12.jpg', x: -1500, y: 0, z: 1000, nx: 1, nz: 0 }

],

structure: [

{

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [-1001, -490, -490, -1001],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [-501, 2, 2, -500],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [0, 502, 502, 0],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [490, 1002, 1002, 490],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-420, 420, 420, -420],

z: [-500, -500, -500, -500],

y: [150, 150, -320, -320]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-20, 20, 20, -20],

z: [-500, -500, -500, -500],

y: [250, 250, 150, 150]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-20, 20, 20, -20],

z: [-500, -500, -500, -500],

y: [-320, -320, -500, -500]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-20, 20, 10, -10],

z: [-500, -500, -100, -100],

y: [-500, -500, -500, -500]

}, {

// base

fill: { r: 32, g: 32, b: 32 },

x: [-50, 50, 50, -50],

z: [-150, -150, -50, -50],

y: [-500, -500, -500, -500]

}, {

// support

fill: { r: 16, g: 16, b: 16 },

x: [-10, 10, 10, -10],

z: [-100, -100, -100, -100],

y: [300, 300, -500, -500]

}, {

// frame

fill: { r: 255, g: 255, b: 255 },

x: [-320, -320, -320, -320],

z: [0, -20, -20, 0],

y: [-190, -190, 190, 190]

}, {

// frame

fill: { r: 255, g: 255, b: 255 },

x: [320, 320, 320, 320],

z: [0, -20, -20, 0],

y: [-190, -190, 190, 190]

},

{ img: true },

{

// ceilingLight

fill: { r: 255, g: 128, b: 0 },

x: [-50, 50, 50, -50],

z: [450, 450, 550, 550],

y: [500, 500, 500, 500]

}, {

// groundLight

fill: { r: 255, g: 128, b: 0 },

x: [-50, 50, 50, -50],

z: [450, 450, 550, 550],

y: [-500, -500, -500, -500]

}

],

options: {

imagesPath: ""

}

});

你的浏览器不支持HTML5画布技术，请使用支持HTML5的浏览器

抖音里面html相册代码大全,分享一下抖音上火的程序员女朋友相册代码相关推荐

  1. 万圣节html代码大全,方舟生存进化249万圣节新版本代码大全分享

    类型:修改器(游戏工具)大小:4.3M语言:中文 评分:10.0 标签: 立即下载 方舟生存进化万圣节版本已经更新了,各位玩家有没有去更新呢,这次大的更新也是更新了不少的东西,下面小编就来给大家介绍一 ...

  2. 技术总监谈好的程序员如何写代码

    要判断一个程序员是不是好的程序员,主要看他写的代码,因为程序员最重要的事是写代码. 即便不去理解代码的意图,只要看一眼,好的程序员写的代码与差的程序员写的代码基本上就可以看出来.好的程序员写的代码,整 ...

  3. 技术总监谈好的程序员如何写代码[转]

    技术总监谈好的程序员如何写代码[转] 要判断一个程序员是不是好的程序员,主要看他写的代码,因为程序员最重要的事是写代码.          即便不去理解代码的意图,只要看一眼,好的程序员写的代码与差的 ...

  4. 新一配：程序员因一行代码被老板开除，网友评论：你这不是脱裤子放屁吗？

    在生活中,只要是你自己能够写代码的就是程序员,但是程序员只是一个统称,其中的差距也是巨大.除了理论知识的差异之外,其实我们可以看见最直观的差异就是编码能力的差距或者项目经验的差距,最主要你还是你的编程 ...

  5. 好的程序员如何写代码

    要判断一个程序员是不是好的程序员,主要看他写的代码,因为程序员最重要的事是写代码. 即便不去理解代码的意图,只要看一眼,好的程序员写的代码与差的程序员写的代码基本上就可以看出来.好的程序员写的代码,整 ...

  6. 抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...

    前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...

  7. 离职后竟半夜偷溜回办公室写代码？一个为自由软件而战斗的程序员

    作者 | 年素清 责编 | 王晓曼 出品 | 程序人生 (ID:coder _life) 理查德•马修•斯托曼(Richard MatthewStallman)是个非常厉害的程序员,他开发出了Emac ...

  8. 当程序员说“这代码写的可真烂”，他们的意思是“这烂代码不是我写的”。而当他们说这段代码有些“小问题”时，很可能这代码是他们自己写的...

    英文原文:What Programmers Say vs. What They Mean 你是否听到过同事说"这段代码不言自明"?你的同事的这句话的实际意思是这段代码不需要写注释. ...

  9. 卖掉 3000 平房子，50 岁程序员回国写代码，三个月内融资 2000 万美元

    2019年7月12日,10多万行C代码的中国物联网大数据平台 TDengine 在 GitHub开源,立即冲上 GitHub 榜首,整整五天霸榜 GitHub.目前该项目在 GitHub 上 Star ...

最新文章

  1. Active Directory数据库复制原理
  2. 提交代码，SVN被锁定，提示：svn is already locked解决方案
  3. PHP中this,self,parent的区别
  4. 核心动画05-CAAnimationGroup
  5. 每天坚持不懈的写软文，得到的几点心得感悟
  6. Django templates 和 urls 拆分
  7. 《大数据》2015年第2期“动态”——大数据发现银行贷款风险
  8. python类之高级应用
  9. 7个示例科普CPU Cache(转)
  10. 光影之路 GPU架构发展史(3/4）
  11. android自动化测试抖音,全自动化的抖音启动速度测试
  12. WCF 第二章 契约 数据契约等效
  13. javaweb JAVA JSP球鞋销售系统购物系统ssm购物系统购物商城系统源码（ssm电子商务系统）
  14. SpreadJS v14.1.5 Crack
  15. BP神经网络简单代码分析
  16. 【转载】前端项目开发流程及技术选型
  17. 最新台式计算机CPU,三月台式电脑CPU性能排行榜， 2019年3月最新版CPU天梯图
  18. scrum敏捷开发、敏捷测试，快速迭代实践
  19. 布莱克曼哈尔窗matlab,基于matlab的布莱克曼窗函数法设计的低通滤波器
  20. 关于面试技巧和简历写法的一些总结

热门文章

  1. 字体靠右代码_HTML文字怎么样右对齐
  2. Python学习笔记：玩转emoji表情
  3. 串口文件传输及点阵汉字字模的读取与显示
  4. 硬盘分区、格式化及文件系统的管理
  5. 成为一名“创始人”，让阅读成为一种习惯
  6. 服务器网卡有什么作用,双口网卡作用
  7. RW007 高速WIFI 模块 开启 BLE 功能说明
  8. Ubuntu 执行 bash 脚本异常
  9. 团队目标管理就用飞项，让项目执行效率飞起来
  10. 如何在 iPad 上运行 VSCode