Hello everyone, I am the blogger of csdn: lqj_ myself
This is my personal blog homepage:
lqj_My blog_CSDN blog-WeChat applet, front-end, python field blogger lqj_I am good at WeChat applet, front-end, python, etc.
https://blog.csdn.net/lbcyllqj?spm=1011.2415 .3001.5343 Bilibili welcome attention:Xiao Miao Develop
Xiaomiao Develop's personal space-Xiaomiao Develop personal homepage-哔哩哔哩Video
This article mainly talks about the HTML special effects of flowers and rain in the sky.
Show effect video:
Flower rain HTML+3D photo album special effects
What are HTML special effects?
HTML special effects refer to a way of using various technologies and codes in web pages to achieve dynamic effects. These effects can be animations, transitions, interactions, and other visual effects. HTML effects can enhance user experience without affecting web page performance.
What is the role of HTML special effects?
HTML special effects can enhance the visual appeal of web pages and make them more lively and interesting. By using HTML special effects, web pages can be made more interactive, thereby increasing user engagement and retention. In addition, HTML special effects can also help the website attract more visitors, thereby increasing the traffic of the website.
How to use HTML special effects?
(1) Use CSS3 transition effects
CSS3 transition effects allow elements to smoothly transition from one state to another. This effect can be used for buttons, menus and other elements. You can use transition effects to make a button change color or size when the user hovers over it.
(2) Use CSS3 animation
CSS3 animation can make elements move or change shape in the form of animation in the web page. This effect can be used for images, titles and other elements. You can use CSS3 animations to make images slowly fade in or out as the user scrolls the page.
(3) Use JavaScript interactive effects
JavaScript interaction effects enable users to interact with web pages. This effect can be used on forms, buttons and other elements. When the user submits the form, you can use JavaScript interactive effects to display a popup window so that the user can confirm that their input is correct.
(4) Using SVG images
SVG images can make images in web pages more lively and interesting. This effect can be used for logos, icons, and other images. An SVG image can be used to make the logo rotate slowly as the user scrolls the page.
Summarizing HTML Effects
HTML special effects can make web pages more lively and interesting, thereby improving user experience and retention rate. By using techniques such as CSS3 transition effects, CSS3 animations, JavaScript interactive effects, and SVG images, you can make web pages more cool. However, it should be noted that excessive use of HTML special effects may affect the performance of web pages, so it needs to be used with caution.
source code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漫天花雨</title>
<link type="text/css"href="css/style.css"rel="stylesheet"/>
</head>
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 600px;
}
canvas {
padding: 0;
margin: 0;
}
div.btnbg {
position: fixed;
left: 0;
top: 0;
}
</style>
<body>
<canvas id="sakura"></canvas>
<div class="btnbg">
</div>
<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
attribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fade
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
void main(void) {
// Projection is based on vertical angle
vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
gl_Position = uProjection * pos;
gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
pposition = pos.xyz;
psize = aMisc.x;
pdist = length(pos.xyz);
palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
vec3 elrsn = sin(aEuler);
vec3 elrcs = cos(aEuler);
mat3 rotx = mat3(
1.0, 0.0, 0.0,
0.0, elrcs.x, elrsn.x,
0.0, -elrsn.x, elrcs.x
);
mat3 roty = mat3(
elrcs.y, 0.0, -elrsn.y,
0.0, 1.0, 0.0,
elrsn.y, 0.0, elrcs.y
);
mat3 rotz = mat3(
elrcs.z, elrsn.z, 0.0,
-elrsn.z, elrcs.z, 0.0,
0.0, 0.0, 1.0
);
mat3 rotmat = rotx * roty * rotz;
normal = rotmat[2];
mat3 trrotm = mat3(
rotmat[0][0], rotmat[1][0], rotmat[2][0],
rotmat[0][1], rotmat[1][1], rotmat[2][1],
rotmat[0][2], rotmat[1][2], rotmat[2][2]
);
normX = trrotm[0];
normY = trrotm[1];
normZ = trrotm[2];
const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
float tmpdfs = dot(lit, normal);
if(tmpdfs < 0.0) {
normal = -normal;
tmpdfs = dot(lit, normal);
}
diffuse = 0.4 + tmpdfs;
vec3 eyev = normalize(-pos.xyz);
if(dot(eyev, normal) > 0.0) {
vec3 hv = normalize(eyev + lit);
specular = pow(max(dot(hv, normal), 0.0), 20.0);
}
else {
specular = 0.0;
}
rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
rstop = pow(rstop, 0.5);
//-0.69315 = ln(0.5)
distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
}
</script>
<script id="sakura_point_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
float ellipse(vec2 p, vec2 o, vec2 r) {
vec2 lp = (p - o) / r;
return length(lp) - 1.0;
}
void main(void) {
vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
vec3 d = vec3(0.0, 0.0, -1.0);
float nd = normZ.z; //dot(-normZ, d);
if(abs(nd) < 0.0001) discard;
float np = dot(normZ, p);
vec3 tp = p + d * np / nd;
vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
//angle = 15 degree
const float flwrsn = 0.258819045102521;
const float flwrcs = 0.965925826289068;
mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
float r;
if(flwrp.x < 0.0) {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
}
else {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
}
if(r > rstop) discard;
vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
col *= vec3(1.0, grady, grady);
col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
col = col * diffuse + specular;
col = mix(fadeCol, col, distancefade);
float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
alpha = smoothstep(0.0, 1.0, alpha) * palpha;
gl_FragColor = vec4(col * 0.5, alpha);
}
</script>
<!-- effects -->
<script id="fx_common_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="bg_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform vec2 uTimes;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec3 col;
float c;
vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
c = exp(-pow(length(tmpv) * 1.8, 2.0));
col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
gl_FragColor = vec4(col * 0.5, 1.0);
}
</script>
<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
}
</script>
<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
gl_FragColor = col / 5.0;
}
</script>
<!-- effect fragment shader template -->
<script id="fx_common_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_FragColor = texture2D(uSrc, texCoord);
}
</script>
<!-- post processing -->
<script id="pp_final_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="pp_final_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform sampler2D uBloom;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
vec4 bloomcol = texture2D(uBloom, texCoord);
vec4 col;
col = srccol + bloomcol * (vec4(1.0) + srccol);
col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
gl_FragColor = vec4(col.rgb, 1.0);
gl_FragColor.a = 1.0;
}
</script>
</body>
<script>
// Utilities
var Vector3 = {};
var Matrix44 = {};
Vector3.create = function (x, y, z) {
return { 'x': x, 'y': y, 'z': z };
};
Vector3.dot = function (v0, v1) {
return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
};
Vector3.cross = function (v, v0, v1) {
v.x = v0.y * v1.z - v0.z * v1.y;
v.y = v0.z * v1.x - v0.x * v1.z;
v.z = v0.x * v1.y - v0.y * v1.x;
};
Vector3.normalize = function (v) {
var l = v.x * v.x + v.y * v.y + v.z * v.z;
if (l > 0.00001) {
l = 1.0 / Math.sqrt(l);
v.x *= l;
v.y *= l;
v.z *= l;
}
};
Vector3.arrayForm = function (v) {
if (v.array) {
v.array[0] = v.x;
v.array[1] = v.y;
v.array[2] = v.z;
}
else {
v.array = new Float32Array([v.x, v.y, v.z]);
}
return v.array;
};
Matrix44.createIdentity = function () {
return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
};
Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
var w = h * aspect;
m[0] = 2.0 * near / w;
m[1] = 0.0;
m[2] = 0.0;
m[3] = 0.0;
m[4] = 0.0;
m[5] = 2.0 * near / h;
m[6] = 0.0;
m[7] = 0.0;
m[8] = 0.0;
m[9] = 0.0;
m[10] = -(far + near) / (far - near);
m[11] = -1.0;
m[12] = 0.0;
m[13] = 0.0;
m[14] = -2.0 * far * near / (far - near);
m[15] = 0.0;
};
Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
Vector3.normalize(frontv);
var sidev = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(sidev, vup, frontv);
Vector3.normalize(sidev);
var topv = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(topv, frontv, sidev);
Vector3.normalize(topv);
m[0] = sidev.x;
m[1] = topv.x;
m[2] = frontv.x;
m[3] = 0.0;
m[4] = sidev.y;
m[5] = topv.y;
m[6] = frontv.y;
m[7] = 0.0;
m[8] = sidev.z;
m[9] = topv.z;
m[10] = frontv.z;
m[11] = 0.0;
m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
m[15] = 1.0;
};
//
var timeInfo = {
'start': 0, 'prev': 0, // Date
'delta': 0, 'elapsed': 0 // Number(sec)
};
//
var gl;
var renderSpec = {
'width': 0,
'height': 0,
'aspect': 1,
'array': new Float32Array(3),
'halfWidth': 0,
'halfHeight': 0,
'halfArray': new Float32Array(3)
// and some render targets. see setViewport()
};
renderSpec.setSize = function (w, h) {
renderSpec.width = w;
renderSpec.height = h;
renderSpec.aspect = renderSpec.width / renderSpec.height;
renderSpec.array[0] = renderSpec.width;
renderSpec.array[1] = renderSpec.height;
renderSpec.array[2] = renderSpec.aspect;
renderSpec.halfWidth = Math.floor(w / 2);
renderSpec.halfHeight = Math.floor(h / 2);
renderSpec.halfArray[0] = renderSpec.halfWidth;
renderSpec.halfArray[1] = renderSpec.halfHeight;
renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
};
function deleteRenderTarget(rt) {
gl.deleteFramebuffer(rt.frameBuffer);
gl.deleteRenderbuffer(rt.renderBuffer);
gl.deleteTexture(rt.texture);
}
function createRenderTarget(w, h) {
var ret = {
'width': w,
'height': h,
'sizeArray': new Float32Array([w, h, w / h]),
'dtxArray': new Float32Array([1.0 / w, 1.0 / h])
};
ret.frameBuffer = gl.createFramebuffer();
ret.renderBuffer = gl.createRenderbuffer();
ret.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, ret.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
return ret;
}
function compileShader(shtype, shsrc) {
var retsh = gl.createShader(shtype);
gl.shaderSource(retsh, shsrc);
gl.compileShader(retsh);
if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
var errlog = gl.getShaderInfoLog(retsh);
gl.deleteShader(retsh);
console.error(errlog);
return null;
}
return retsh;
}
function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
if (vsh == null || fsh == null) {
return null;
}
var prog = gl.createProgram();
gl.attachShader(prog, vsh);
gl.attachShader(prog, fsh);
gl.deleteShader(vsh);
gl.deleteShader(fsh);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
var errlog = gl.getProgramInfoLog(prog);
console.error(errlog);
return null;
}
if (uniformlist) {
prog.uniforms = {};
for (var i = 0; i < uniformlist.length; i++) {
prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
}
}
if (attrlist) {
prog.attributes = {};
for (var i = 0; i < attrlist.length; i++) {
var attr = attrlist[i];
prog.attributes[attr] = gl.getAttribLocation(prog, attr);
}
}
return prog;
}
function useShader(prog) {
gl.useProgram(prog);
for (var attr in prog.attributes) {
gl.enableVertexAttribArray(prog.attributes[attr]);;
}
}
function unuseShader(prog) {
for (var attr in prog.attributes) {
gl.disableVertexAttribArray(prog.attributes[attr]);;
}
gl.useProgram(null);
}
/
var projection = {
'angle': 60,
'nearfar': new Float32Array([0.1, 100.0]),
'matrix': Matrix44.createIdentity()
};
var camera = {
'position': Vector3.create(0, 0, 100),
'lookat': Vector3.create(0, 0, 0),
'up': Vector3.create(0, 1, 0),
'dof': Vector3.create(10.0, 4.0, 8.0),
'matrix': Matrix44.createIdentity()
};
var pointFlower = {};
var meshFlower = {};
var sceneStandBy = false;
var BlossomParticle = function () {
this.velocity = new Array(3);
this.rotation = new Array(3);
this.position = new Array(3);
this.euler = new Array(3);
this.size = 1.0;
this.alpha = 1.0;
this.zkey = 0.0;
};
BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
this.velocity[0] = vx;
this.velocity[1] = vy;
this.velocity[2] = vz;
};
BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
this.rotation[0] = rx;
this.rotation[1] = ry;
this.rotation[2] = rz;
};
BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
this.position[0] = nx;
this.position[1] = ny;
this.position[2] = nz;
};
BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
this.euler[0] = rx;
this.euler[1] = ry;
this.euler[2] = rz;
};
BlossomParticle.prototype.setSize = function (s) {
this.size = s;
};
BlossomParticle.prototype.update = function (dt, et) {
this.position[0] += this.velocity[0] * dt;
this.position[1] += this.velocity[1] * dt;
this.position[2] += this.velocity[2] * dt;
this.euler[0] += this.rotation[0] * dt;
this.euler[1] += this.rotation[1] * dt;
this.euler[2] += this.rotation[2] * dt;
};
function createPointFlowers() {
// get point sizes
var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
renderSpec.pointSize = { 'min': prm[0], 'max': prm[1] };
var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
var frgsrc = document.getElementById("sakura_point_fsh").textContent;
pointFlower.program = createShader(
vtxsrc, frgsrc,
['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
['aPosition', 'aEuler', 'aMisc']
);
useShader(pointFlower.program);
pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
// paramerters: velocity[3], rotate[3]
pointFlower.numFlowers = 1600;
pointFlower.particles = new Array(pointFlower.numFlowers);
// vertex attributes {position[3], euler_xyz[3], size[1]}
pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
pointFlower.positionArrayOffset = 0;
pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
pointFlower.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(pointFlower.program);
for (var i = 0; i < pointFlower.numFlowers; i++) {
pointFlower.particles[i] = new BlossomParticle();
}
}
function initPointFlowers() {
//area
pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
pointFlower.fader.x = 10.0; //env fade start
pointFlower.fader.y = pointFlower.area.z; //env fade half
pointFlower.fader.z = 0.1; //near fade start
//particles
var PI2 = Math.PI * 2.0;
var tmpv3 = Vector3.create(0, 0, 0);
var tmpv = 0;
var symmetryrand = function () { return (Math.random() * 2.0 - 1.0); };
for (var i = 0; i < pointFlower.numFlowers; i++) {
var tmpprtcl = pointFlower.particles[i];
//velocity
tmpv3.x = symmetryrand() * 0.3 + 0.8;
tmpv3.y = symmetryrand() * 0.2 - 1.0;
tmpv3.z = symmetryrand() * 0.3 + 0.5;
Vector3.normalize(tmpv3);
tmpv = 2.0 + Math.random() * 1.0;
tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
//rotation
tmpprtcl.setRotation(
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5
);
//position
tmpprtcl.setPosition(
symmetryrand() * pointFlower.area.x,
symmetryrand() * pointFlower.area.y,
symmetryrand() * pointFlower.area.z
);
//euler
tmpprtcl.setEulerAngles(
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0
);
//size
tmpprtcl.setSize(0.9 + Math.random() * 0.1);
}
}
function renderPointFlowers() {
//update
var PI2 = Math.PI * 2.0;
var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
var repeatPos = function (prt, cmp, limit) {
if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
//out of area
if (prt.position[cmp] > 0) {
prt.position[cmp] -= limit * 2.0;
}
else {
prt.position[cmp] += limit * 2.0;
}
}
};
var repeatEuler = function (prt, cmp) {
prt.euler[cmp] = prt.euler[cmp] % PI2;
if (prt.euler[cmp] < 0.0) {
prt.euler[cmp] += PI2;
}
};
for (var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
prtcl.update(timeInfo.delta, timeInfo.elapsed);
repeatPos(prtcl, 0, pointFlower.area.x);
repeatPos(prtcl, 1, pointFlower.area.y);
repeatPos(prtcl, 2, pointFlower.area.z);
repeatEuler(prtcl, 0);
repeatEuler(prtcl, 1);
repeatEuler(prtcl, 2);
prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;
prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+ camera.matrix[6] * prtcl.position[1]
+ camera.matrix[10] * prtcl.position[2]
+ camera.matrix[14]);
}
// sort
pointFlower.particles.sort(function (p0, p1) { return p0.zkey - p1.zkey; });
// update data
var ipos = pointFlower.positionArrayOffset;
var ieuler = pointFlower.eulerArrayOffset;
var imisc = pointFlower.miscArrayOffset;
for (var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
pointFlower.dataArray[ipos] = prtcl.position[0];
pointFlower.dataArray[ipos + 1] = prtcl.position[1];
pointFlower.dataArray[ipos + 2] = prtcl.position[2];
ipos += 3;
pointFlower.dataArray[ieuler] = prtcl.euler[0];
pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
ieuler += 3;
pointFlower.dataArray[imisc] = prtcl.size;
pointFlower.dataArray[imisc + 1] = prtcl.alpha;
imisc += 2;
}
//draw
gl.enable(gl.BLEND);
//gl.disable(gl.DEPTH_TEST);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
var prog = pointFlower.program;
useShader(prog);
gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
// doubler
for (var i = 1; i < 2; i++) {
var zpos = i * -2.0;
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
}
//main
pointFlower.offset[0] = 0.0;
pointFlower.offset[1] = 0.0;
pointFlower.offset[2] = 0.0;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(prog);
gl.enable(gl.DEPTH_TEST);
gl.disable(gl.BLEND);
}
// effects
//common util
function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
var ret = {};
var unifs = ['uResolution', 'uSrc', 'uDelta'];
if (exunifs) {
unifs = unifs.concat(exunifs);
}
var attrs = ['aPosition'];
if (exattrs) {
attrs = attrs.concat(exattrs);
}
ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
useShader(ret.program);
ret.dataArray = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0
]);
ret.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(ret.program);
return ret;
}
// basic usage
// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
// gl.uniform**(...); //additional uniforms
// drawEffect()
// unuseEffect(prog)
// TEXTURE0 makes src
function useEffect(fxobj, srctex) {
var prog = fxobj.program;
useShader(prog);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
if (srctex != null) {
gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
gl.uniform1i(prog.uniforms.uSrc, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
}
}
function drawEffect(fxobj) {
gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function unuseEffect(fxobj) {
unuseShader(fxobj.program);
}
var effectLib = {};
function createEffectLib() {
var vtxsrc, frgsrc;
//common
var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
//background
frgsrc = document.getElementById("bg_fsh").textContent;
effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
// make brightpixels buffer
frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
// direction blur
frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
//final composite
vtxsrc = document.getElementById("pp_final_vsh").textContent;
frgsrc = document.getElementById("pp_final_fsh").textContent;
effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
}
// background
function createBackground() {
//console.log("create background");
}
function initBackground() {
//console.log("init background");
}
function renderBackground() {
gl.disable(gl.DEPTH_TEST);
useEffect(effectLib.sceneBg, null);
gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
drawEffect(effectLib.sceneBg);
unuseEffect(effectLib.sceneBg);
gl.enable(gl.DEPTH_TEST);
}
// post process
var postProcess = {};
function createPostProcess() {
//console.log("create post process");
}
function initPostProcess() {
//console.log("init post process");
}
function renderPostProcess() {
gl.enable(gl.TEXTURE_2D);
gl.disable(gl.DEPTH_TEST);
var bindRT = function (rt, isclear) {
gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
gl.viewport(0, 0, rt.width, rt.height);
if (isclear) {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
};
//make bright buff
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
drawEffect(effectLib.mkBrightBuf);
unuseEffect(effectLib.mkBrightBuf);
// make bloom
for (var i = 0; i < 2; i++) {
var p = 1.5 + 1 * i;
var s = 2.0 + 1 * i;
bindRT(renderSpec.wHalfRT1, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
}
//display
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
useEffect(effectLib.finalComp, renderSpec.mainRT);
gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
drawEffect(effectLib.finalComp);
unuseEffect(effectLib.finalComp);
gl.enable(gl.DEPTH_TEST);
}
/
var SceneEnv = {};
function createScene() {
createEffectLib();
createBackground();
createPointFlowers();
createPostProcess();
sceneStandBy = true;
}
function initScene() {
initBackground();
initPointFlowers();
initPostProcess();
//camera.position.z = 17.320508;
camera.position.z = pointFlower.area.z + projection.nearfar[0];
projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
}
function renderScene() {
//draw
Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
gl.enable(gl.DEPTH_TEST);
//gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
gl.clearColor(0.005, 0, 0.05, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
renderBackground();
renderPointFlowers();
renderPostProcess();
}
/
function onResize(e) {
makeCanvasFullScreen(document.getElementById("sakura"));
setViewports();
if (sceneStandBy) {
initScene();
}
}
function setViewports() {
renderSpec.setSize(gl.canvas.width, gl.canvas.height);
gl.clearColor(0.2, 0.2, 0.5, 1.0);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
var rtfunc = function (rtname, rtw, rth) {
var rt = renderSpec[rtname];
if (rt) deleteRenderTarget(rt);
renderSpec[rtname] = createRenderTarget(rtw, rth);
};
rtfunc('mainRT', renderSpec.width, renderSpec.height);
rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
}
function render() {
renderScene();
}
var animating = true;
function toggleAnimation(elm) {
animating ^= true;
if (animating) animate();
if (elm) {
elm.innerHTML = animating ? "Stop" : "Start";
}
}
function stepAnimation() {
if (!animating) animate();
}
function animate() {
var curdate = new Date();
timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
timeInfo.prev = curdate;
if (animating) requestAnimationFrame(animate);
render();
}
function makeCanvasFullScreen(canvas) {
var b = document.body;
var d = document.documentElement;
fullw = Math.max(b.clientWidth, b.scrollWidth, d.scrollWidth, d.clientWidth);
fullh = Math.max(b.clientHeight, b.scrollHeight, d.scrollHeight, d.clientHeight);
canvas.width = fullw;
canvas.height = fullh;
}
window.addEventListener('load', function (e) {
var canvas = document.getElementById("sakura");
try {
makeCanvasFullScreen(canvas);
gl = canvas.getContext('experimental-webgl');
} catch (e) {
alert("WebGL not supported." + e);
console.error(e);
return;
}
window.addEventListener('resize', onResize);
setViewports();
createScene();
initScene();
timeInfo.start = new Date();
timeInfo.prev = timeInfo.start;
animate();
});
//set window.requestAnimationFrame
(function (w, r) {
w['r' + r] = w['r' + r] || w['webkitR' + r] || w['mozR' + r] || w['msR' + r] || w['oR' + r] || function (c) { w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');
</script>
</html>Add album effects
html：
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>css：
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{background-image:url(../img/1.png);
/*background: url(../img/1.png) ;*/
max-width: 100%;
/* 最大宽度 */
min-width: 100%;
/* 最小宽度 */
height: 100%;
/* 高度 */
background-size: cover;
/* 背景大小：覆盖 */
background-repeat: no-repeat;
/* 北京重复：不重复 */
background-attachment: fixed;
/* 背景图片滚动属性：固定 */
background-size:100% 100%;
/* 背景大小 */
position: absolute;
/* 位置：绝对 */
margin-left: auto;
/* 与左边距：自动 */
margin-right: auto;
/* 与右边距：自动 */
}
li{
list-style: none;
/* 列表样式：无 */
}
.box{
width:200px;
height:200px;
background-size: cover;
/* 背景大小：覆盖 */
background-repeat: no-repeat;
/* 背景重复：不重复 */
background-attachment: fixed;
/* 背景图片滚动属性：固定 */
background-size:100% 100%;
position: absolute;
/* 位置：绝对 */
margin-left: 42%;
/* 与左边距：42% */
margin-top: 22%;
/* 与上边距：22% */
-webkit-transform-style:preserve-3d;
/* 被嵌套的元素在3D空间采用何种渲染方式：保存3d效果
有两个值：
1.flat（默认）不带任何3d效果
2.preserve-3d：保存3d效果 */
-webkit-transform:rotateX(13deg);
/* 元素变换：
- `scale`：缩放，1 为原始大小。参数正数时放大，负数缩小。属性值为一个时，`x/y` 轴同时缩放；属性值为两个值时，分别控制 `x`、`y` 轴的缩放。
- `rotate`：水平旋转，属性值格式为 `Xdeg`。`X` 为正数时，顺时针旋转；为负数时，逆时针旋转
- `translate`：平移，基于 `XY` 轴重新定位元素。属性值为一个时，`x`、`y` 轴参数相同；为两个时，`x`、`y` 轴分别定位
- `skew`：将元素沿水平方向倾斜变形。属性值为一个时，`x/y` 轴参数相同；为两个时，`x`、`y` 轴各自倾斜 */
-webkit-animation:move 5s linear infinite;
}
.minbox{
width:100px;
height:100px;
position: absolute;
left:50px;
top:30px;
-webkit-transform-style:preserve-3d;
}
.minbox li{
width:100px;
height:100px;
position: absolute;
left:0;
top:0;
}
.minbox li:nth-child(1){
background: url(../img/9.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../img/99.jpg) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../img/999.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../img/9999.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../img/99999.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../img/999999.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../img/0.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../img/00.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../img/000.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../img/0000.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../img/00000.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../img/000000.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
-webkit-transform-style: preserve-3d;
}
.maxbox li{
width: 200px;
height: 200px;
background: #fff;
border:1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
-webkit-transform:translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move{
0%{
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100%{
-webkit-transform:rotateX(13deg) rotateY(360deg);
}
}The following code customizes the image:
.minbox li:nth-child(1){
background: url(../img/9.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../img/99.jpg) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../img/999.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../img/9999.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../img/99999.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../img/999999.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../img/0.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../img/00.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../img/000.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../img/0000.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../img/00000.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../img/000000.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
