原生javascript+css3編寫的3D魔方動畫旋扭特效

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1382 次日期：2016-07-20 15:11:56

溫馨提示：易賢網(wǎng)小編為您整理了“原生javascript+css3編寫的3D魔方動畫旋扭特效”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了原生javascript+css3編寫的3D魔方動畫旋扭特效的相關(guān)資料,需要的朋友可以參考下

代碼如下:

<!DOCTYPE html>

<html>

<head>

var cache = {};

(function (exports) {

function Cube(opts) {

opts = opts || {};

this.parent = opts.parent; //插入到哪里

this.browserPrefix = opts.browserPrefix;

this.width = opts.width;

this.height = opts.height;

this.cubZ = opts.cubZ;

this.face = opts.face;

this.row = opts.row;

this.column = opts.column;

this.offsetX = this.column * (this.width + opts.marginX); //

this.offsetY = this.row * (this.height + opts.marginY);//

this.offsetZ = this.face * (this.cubZ + opts.marginZ);//

this.positiveZ = this.cubZ / 2;

this.negativeZ = -this.cubZ / 2;

this.cubFaceInfo = opts.cubFaceInfo;

this.dimension = opts.dimension;

this.centerX = (this.dimension * this.width + (this.dimension - 1) * opts.marginX) / 2;

this.centerY = (this.dimension * this.height + (this.dimension - 1) * opts.marginY) / 2;

this.centerZ = (this.dimension * this.cubZ + (this.dimension - 1) * opts.marginZ) / 2;

this.translateX = this.offsetX - this.centerX; //把中心點(diǎn)設(shè)為原點(diǎn)

this.translateY = this.offsetY - this.centerY; //

this.translateZ = this.cubZ / 2 + this.offsetZ - this.centerZ; //offsetZ按上面計算應(yīng)該跟x,y在一個平面上即后面，但實(shí)際上由于要形成立方體，在Z軸上已經(jīng)后退了cubZ/2個距離，故為和上面保持一致在一個面上，這里需要再加回cubZ/2個距離，使默認(rèn)的xyz原點(diǎn)都在一個平面上即立方體后面左上角三維坐標(biāo)系，以這個點(diǎn)作為參考點(diǎn)平移和設(shè)置旋轉(zhuǎn)原點(diǎn)

this.cubeFace = [];

this.rotateTransfrom = "";

this.init();

}

Cube.prototype = {

init: function () {

this.createCubeBox();

this.createFront();

this.createBack();

this.createTop();

this.createBottom();

this.createLeft();

this.createRight();

createCubeBox: function () {

this.Box = document.createElement('div');

this.Box.style.width = this.width + "px";

this.Box.style.height = this.height + "px";

this.Box.style.left = "50%";

this.Box.style.top = "50%";

this.Box.style.position = "absolute";

this.Box.style[this.browserPrefix + "TransformStyle"] = "preserve-3d";

this.Box.style[this.browserPrefix + "Perspective"] = "0";

// this.Scene.style[this.browserPrefix + "backfaceVisibility"] = "hidden";

this.intalTransform = "translateZ(" + this.translateZ + "px) translateX(" + this.translateX + "px) translateY(" + this.translateY + "px)";

this.Box.style[this.browserPrefix + "Transform"] = this.intalTransform;

this.Box.style[this.browserPrefix + "TransformOrigin"] = "" + (-this.translateX) + "px " + (-this.translateY) + "px " + (-this.translateZ) + "px";

this.parent.appendChild(this.Box);

this.x = window.getComputedStyle(this.Box).getPropertyValue('left');

this.y = window.getComputedStyle(this.Box).getPropertyValue('top');

this.matrix3d = window.getComputedStyle(this.Box).getPropertyValue('transform');

createFace: function () {

var face = document.createElement('div');

face.style.margin = 0;

face.style.position = "absolute";

face.style.width = this.width + "px";

face.style.height = this.height + "px";

return face;

createFront: function () {

var face = this.createFace();

face.style[this.browserPrefix + "Transform"] = "translateZ(" + this.positiveZ + "px) "

this.cubeFace.push(face);

this.front = face;

this.Box.appendChild(face);

createBack: function () {

var face = this.createFace();

face.style[this.browserPrefix + "Transform"] = "translateZ(" + this.negativeZ + "px) ";

this.cubeFace.push(face);

this.back = face;

this.Box.appendChild(face);

createTop: function () {

var face = this.createFace();

face.style[this.browserPrefix + "Transform"] = "rotateX(90deg) translateZ(" + this.positiveZ + "px) ";

this.cubeFace.push(face);

this.top = face;

this.Box.appendChild(face);

createBottom: function () {

var face = this.createFace();

face.style[this.browserPrefix + "Transform"] = "rotateX(90deg) translateZ(" + this.negativeZ + "px) ";

this.cubeFace.push(face);

this.bottom = face;

this.Box.appendChild(face);

createLeft: function () {

var face = this.createFace();

face.style[this.browserPrefix + "Transform"] = "rotateY(90deg) translateZ(" + this.negativeZ + "px) ";

this.cubeFace.push(face);

this.left = face;

this.Box.appendChild(face);

createRight: function () {

var face = this.createFace();

face.style[this.browserPrefix + "Transform"] = "rotateY(90deg) translateZ(" + (this.positiveZ) + "px) ";

this.cubeFace.push(face);

this.right = face;

this.Box.appendChild(face);

}

exports.magicCube = function (opts) {

opts = opts || {};

this.parent = opts.parent || document.getElementsByTagName('body')[0];

this.dimension = opts.dimension || 3; //魔方級數(shù)

this.cubWidth = opts.cubWidth || 50; //單個立方體寬度

this.cubHidth = opts.cubHidth || 50; //單個立方體告訴

this.marginLeft = opts.marginLeft || 0;

this.marginTop = opts.marginLeft || 0;

this.marginZ = opts.marginZ || 0;

this.cubZ = opts.cubZ || 50; //單個立方體Z軸距離

this.sceneWidth = opts.sceneWidth; //3d場景寬度

this.sceneHeight = opts.sceneHeight; //3d場景高度

this.Perspective = opts.Perspective || 0; //投影值

this.cubFaceInfo = opts.cubFaceInfo || { front: { backGround: "rgba(0,255,255,.5)" }, back: { backGround: "rgba(153,204,255,.5)" }, left: { backGround: "rgba(128,0,128,.5)" }, right: { backGround: "rgba(255,0,255,.5)" }, top: { backGround: "rgba(255,153,204,.5)" }, bottom: { backGround: "rgba(0,204,255,.5)" }, inner: { backGround: "rgba(100,100,100,.5)" } }; //立方體面信息

this.angle = opts.angle || 90;

this.rollbackPoint = opts.rollbackPoint || 10;

this.faceCount = this.dimension * this.dimension; //每面立方體個數(shù)

this.count = this.dimension * this.dimension * this.dimension; //立方體總個數(shù)

this.cubes = [];

this.browserPrefix = "";

this.isRunning = 0;

this.timer = null;

this.rotateFace;

this.moveDirect = true;//正向隨機(jī)動作還是回歸，默認(rèn)為正向

this.cubeMoveQueue = [];

this.rollMoveStack = [];//動作回歸的堆棧

this.init();

};

magicCube.prototype = {

init: function () {

this.start();

create3dScene: function () {

this.Scene = document.createElement('div');

//this.Scene.className = "cube";

var width = this.sceneWidth || this.clientWidth,

height = this.sceneHeight || this.clientHeight;

this.Scene.style.width = width + "px";

this.Scene.style.height = height + "px";

this.Scene.style.position = "relative";

this.Scene.style[this.browserPrefix + "TransformStyle"] = "preserve-3d";

this.Scene.style[this.browserPrefix + "Perspective"] = this.Perspective + "px";

// this.Scene.style[this.browserPrefix + "backfaceVisibility"] = "hidden";

this.Scene.style[this.browserPrefix + "Transform"] = "rotateX(-30deg) rotateY(30deg) ";

this.parent.appendChild(this.Scene);

create: function (face, row, column) {

return new Cube({

parent: this.Scene,

dimension: this.dimension,

width: this.cubWidth,

height: this.cubHidth,

cubZ: this.cubZ,

face: face,

row: row,

column: column,

browserPrefix: this.browserPrefix,

cubFaceInfo: this.cubFaceInfo,

marginX: this.marginLeft,

marginY: this.marginTop,

marginZ: this.marginZ,

dimension: this.dimension

});

createMagicCube: function (index) {

var face = 0, row = 0, column = 0;

for (var i = 0; i < this.count; i++) {

this.cubes.push(this.create(face, row, column));

this.cubes[this.cubes.length - 1].index = this.cubes.length - 1;

column++;

if ((i + 1) % this.dimension === 0) {

row++;

column = 0;

}

if ((i + 1) % this.faceCount === 0) {

face++;

row = 0;

}

drawBackGroundColor: function () {

for (var face in this.cubFaceInfo) {

if (face == "inner") {

this.setInnerBKColor(this.cubFaceInfo[face].backGround);

}

else {

var cube = this.getCubesByFace(face);

for (var i = 0, len = cube.length; i < len; i++) {

cube[i][face].style.background = this.cubFaceInfo[face].backGround;

}

setInnerBKColor: function (color) {

for (var i = 0; i < this.count; i++) {

for (var j = 0; j < 6; j++) {

if (this.cubes[i].cubeFace[j].style.background == "") {

this.cubes[i].cubeFace[j].style.background = color;

}

getZFace: function (zIndex) {

var zFace = [];

if (zIndex < 1 || zIndex > this.dimension)

return null;

for (var i = (zIndex - 1) * this.faceCount; i < zIndex * this.faceCount; i++) {

zFace.push(this.cubes[i]);

}

return zFace;

getXFace: function (xIndex) {

var xFace = [];

if (xIndex < 1 || xIndex > this.dimension)

return null;

for (var i = 0; i < this.count; i++) {

if (i % this.dimension == 0)

xFace.push(this.cubes[i + xIndex - 1]);

}

return xFace;

getYFace: function (yIndex) {

var yFace = [];

if (yIndex < 1 || yIndex > this.dimension)

return null;

for (var i = 0; i < this.count; i++) {

if (i % this.faceCount == (yIndex - 1) * this.dimension) {

for (var j = 0; j < this.dimension; j++)

yFace.push(this.cubes[i + j]);

}

return yFace;

getSideCubes: function (cubes, circleIndex) {

var sides = [], top = [], left = [], bottom = [], right = [];

if (circleIndex < 0 || circleIndex > this.dimension / 2 - 1)

return null;

for (var i = 0, count = this.dimension - circleIndex * 2; i < count; i++) {

top.push(cubes[circleIndex * this.dimension + circleIndex + i]);

left.push(cubes[circleIndex * this.dimension + circleIndex + i * this.dimension]);

bottom.push(cubes[(this.dimension - 1 - circleIndex) * this.dimension + circleIndex + i]);

right.push(cubes[circleIndex * this.dimension + circleIndex + i * this.dimension + (this.dimension - (circleIndex * 2) - 1)]);

}

sides.push(this.orderByDesc(top));

sides.push(left);

sides.push(bottom);

sides.push(this.orderByDesc(right));

return sides;

getCubesByFace: function (face) {

switch (face) {

case "front": return this.getZFace(this.dimension);

case "back": return this.getZFace(1);

case "left": return this.getXFace(1);

case "right": return this.getXFace(this.dimension);

case "top": return this.getYFace(1);

case "bottom": return this.getYFace(this.dimension);

}

moveMagicCube: function () {

if (this.cubes.length < 1) return;

//var cubes = this.getYFace(2);

//for (var i = 0, len = cubes.length; i < len; i++) {

// cubes[i].Box.className = "rotate";

//}

//隨機(jī)產(chǎn)生3D轉(zhuǎn)動方向

this.isRunning = 0;

var direct = this.random(1, 3), rotateDirect = "", getFaceFun;

// direct=3;

switch (direct) {

case 1: rotateDirect = "rotateX"; getFaceFun = this.getXFace; break;

case 2: rotateDirect = "rotateY"; getFaceFun = this.getYFace; break;

case 3: rotateDirect = "rotateZ"; getFaceFun = this.getZFace; break;

}

this.rotateFace = rotateDirect;

this.cubeRotateStatus = [];

for (var i = 1; i <= this.dimension; i++) {

var status = this.random(0, 2);

this.cubeRotateStatus.push(status);

switch (status) {

case 0: break;//不轉(zhuǎn)動

case 1: this.rotateBox(this.angle, rotateDirect, i, getFaceFun.call(this, i)); break;//正向轉(zhuǎn)動90

case 2: this.rotateBox(-this.angle, rotateDirect, i, getFaceFun.call(this, i)); break;//反向轉(zhuǎn)動90

}

var flag = false;

for (var i = 0, len = this.cubeRotateStatus.length; i < len; i++) {

if (this.cubeRotateStatus[i]) {

flag = true;

break;

}

if (!flag) {//一個都沒轉(zhuǎn)的情況則強(qiáng)制補(bǔ)充一個

var index = this.random(1, this.dimension);

this.rotateBox(this.angle, rotateDirect, index, getFaceFun.call(this, index)); //正向轉(zhuǎn)動90

this.cubeRotateStatus[index - 1] = 1;//全都不轉(zhuǎn)動默認(rèn)選出一個使其正向轉(zhuǎn)動指定度數(shù)

}

setTimeout(this.timerFun, 100);

this.rollMoveStack.push({ rotateFace: this.rotateFace, cubeRotateStatus: this.cubeRotateStatus });//記錄動作狀態(tài)

if (this.rollMoveStack.length == this.rollbackPoint)//判斷當(dāng)達(dá)到閥值時切換動作方向?yàn)榛貧w

this.moveDirect = false;

moveRollBackCube: function () {

var record = this.rollMoveStack.pop(), getFaceFun;

this.rotateFace = record.rotateFace;

this.isRunning = 0;

switch (record.rotateFace) {

case "rotateX": getFaceFun = this.getXFace; break;

case "rotateY": getFaceFun = this.getYFace; break;

case "rotateZ": getFaceFun = this.getZFace; break;

}

this.cubeRotateStatus = [];

for (var i = 0, len = record.cubeRotateStatus.length; i < len; i++) {

var dimensionIndex = i+1, status = record.cubeRotateStatus[i];

if (status == 1) {

this.cubeRotateStatus.push(2);//1 變2，2變1

this.rotateBox(-this.angle, record.rotateFace, dimensionIndex, getFaceFun.call(this, dimensionIndex)); //反向轉(zhuǎn)動90

}

else if (status == 2) {

this.cubeRotateStatus.push(1);//1 變2，2變1

this.rotateBox(this.angle, record.rotateFace, dimensionIndex, getFaceFun.call(this, dimensionIndex)); //反向轉(zhuǎn)動90

}

else {

this.cubeRotateStatus.push(0);

}

setTimeout(this.timerFun, 100);

if (this.rollMoveStack.length == 0)//判斷當(dāng)達(dá)到0時切換動作為正向隨機(jī)

this.moveDirect = true;

intersect: function (source, target) {

var data = [];

for (var i = 0, len = source.length; i < len; i++) {

var index = target.indexOf(source[i]);

if (index >= 0)

data.push(source[i])

}

return data;

orderByDesc: function (datas) {

var temp;

for (var i = 0; i < datas.length - 1; i++) {

for (var j = i + 1; j < datas.length; j++) {

if (parseFloat(datas[i].index) < parseFloat(datas[j].index)) {

temp = datas[i];

datas[i] = datas[j];

datas[j] = temp;

}

return datas;

getSideBackGround: function (sideFaces, face) {

var backGrounds = [];

for (var i = 0, len = sideFaces.length; i < len; i++) {

backGrounds.push(sideFaces[i][face].style.background);

}

return backGrounds;

setRotateDirectSideBackGround: function (faceCubes, sideFace, offset, status) {

var oldSides = this.getSideCubes(faceCubes, 0), backColor = [];

var offsetNIndex, offsetPIndex;

for (var j = 0; j < 4; j++) {

offsetPIndex = (j - offset + 4) % 4;

offsetNIndex = (j + offset) % 4;

if (this.rotateFace == "rotateY") {

if (status == 1)//正向

{

backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], sideFace[offsetPIndex]);

}

else//反向

{

backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], sideFace[offsetNIndex]);

}

else {

if (status == 2)//正向

{

backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], sideFace[offsetPIndex]);

}

else//反向

{

backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], sideFace[offsetNIndex]);

}

for (var j = 0; j < 4; j++) {

for (var k = 0; k < oldSides[j].length; k++) {

oldSides[j][k][sideFace[j]].style.background = backColor[j][k];

}

setRotateOtherDirectSideBackGround: function (faceCubes, otherFace, offset, status) {

var oldSides = [], backColor = [];

var offsetNIndex, offsetPIndex;

for (var i = 0; i <= parseInt(this.dimension / 2) - 1; i++) {

oldSides = this.getSideCubes(faceCubes, i), backColor = [];

for (var j = 0; j < 4; j++) {

offsetPIndex = (j - offset + 4) % 4;

offsetNIndex = (j + offset) % 4;

if (this.rotateFace == "rotateY") {

if (status == 1)//正向

{

backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], otherFace);

}

else//反向

{

backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], otherFace);

}

else {

if (status == 2)//正向

{

backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], otherFace);

}

else//反向

{

backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], otherFace);

}

for (var j = 0; j < 4; j++) {

for (var k = 0; k < oldSides[j].length; k++) {

oldSides[j][k][otherFace].style.background = backColor[j][k];

}

animationEnd: function () {

var offset = this.angle / 90, faceCubes = [], otherFace;

var zSideFace = ["top", "left", "bottom", "right"], xSideFace = ["back", "top", "front", "bottom"], ySideFace = ["back", "left", "front", "right"], sideFace = [];

for (var i = 0, len = this.cubeRotateStatus.length; i < len; i++) {

var status = this.cubeRotateStatus[i];

if (status) {

var dimensionIndex = i + 1;

switch (this.rotateFace) {

case "rotateX": faceCubes = this.getXFace(dimensionIndex); sideFace = xSideFace; if (dimensionIndex == 1) otherFace = "left"; else if (dimensionIndex == this.dimension) otherFace = "right"; break;

case "rotateY": faceCubes = this.getYFace(dimensionIndex); sideFace = ySideFace; if (dimensionIndex == 1) otherFace = "top"; else if (dimensionIndex == this.dimension) otherFace = "bottom"; break;

case "rotateZ": faceCubes = this.getZFace(dimensionIndex); sideFace = zSideFace; if (dimensionIndex == 1) otherFace = "back"; else if (dimensionIndex == this.dimension) otherFace = "front"; break;

}

this.setRotateDirectSideBackGround(faceCubes, sideFace, offset, status);

if (dimensionIndex == 1 || dimensionIndex == this.dimension)

this.setRotateOtherDirectSideBackGround(faceCubes, otherFace, offset, status);

}

// console.info(this.rollMoveStack.length + "," + this.moveDirect);

if (this.moveDirect)

this.moveMagicCube();

else

this.moveRollBackCube();

// alert("運(yùn)行結(jié)束");

bindAnimationEvent: function () {

var loopMove = function () {

cache.magicCube.isRunning--;//由于按組轉(zhuǎn)動，顧要等組成員都完成再進(jìn)行新的動畫

if (cache.magicCube.isRunning == 0)

cache.magicCube.animationEnd();

}

for (var i = 0; i < this.count; i++) {

this.prefixedEvent(this.cubes[i].Box, "AnimationEnd", loopMove, true);

}

cache.magicCube = this;//緩存，避免內(nèi)存泄露

rotateBox: function (angle, rotateDirect, faceIndex, cubes) {

if (cubes != null) {

var startStatus = rotateDirect + "(0deg)", endStatus = rotateDirect + "(" + angle + "deg)";

// this.changeAnimationStatus("mydhua", startStatus, endStatus)

for (var i = 0, len = cubes.length; i < len; i++) {

var ruleName = "roateRule" + faceIndex + i;

this.isRunning++;//組成員轉(zhuǎn)動統(tǒng)計

//if (cubes[i].rotateTransfrom != "")

// startStatus = cubes[i].rotateTransfrom;

cubes[i].rotateTransfrom = endStatus;

if (this.findKeyframesRule(ruleName) == null)

this.createKeyframesRule(ruleName, cubes[i].intalTransform + " " + startStatus, cubes[i].intalTransform + " " + endStatus);

else

this.changeAnimationStatus(ruleName, cubes[i].intalTransform + " " + startStatus, cubes[i].intalTransform + " " + endStatus);

cubes[i].Box.style[this.browserPrefix + "AnimationName"] = "none";

this.cubeMoveQueue.push({ cube: cubes[i], rule: ruleName });

}

findKeyframesRule: function (rule) {

var ruleName = this.browserPrefix == "" ? "KEYFRAMES_RULE" : this.browserPrefix.toUpperCase() + "_KEYFRAMES_RULE";

var ss = document.styleSheets;

for (var i = 0; i < ss.length; ++i) {

for (var j = 0; j < ss[i].cssRules.length; ++j) {

if (ss[i].cssRules[j].type == window.CSSRule[ruleName] && ss[i].cssRules[j].name == rule) { return ss[i].cssRules[j]; }

}

return null;

createKeyframesRule: function (rule, startStatus, endStatus) {

var prefix = this.browserPrefix == "" ? "" : "-" + this.browserPrefix + "-";

var sheet;

if (document.styleSheets.length < 1)

sheet = this.createSheets();

else

sheet = document.styleSheets[0];

var selectorText = "@" + prefix + "keyframes " + rule;

var cssText = "0% { " + prefix + "transform: " + startStatus + "; } 100% { " + prefix + "transform: " + endStatus + "; }"

if (sheet.insertRule) {

sheet.insertRule(selectorText + "{" + cssText + "}", 0);

} else if (sheet.addRule) {//兼容IE

sheet.addRule(selectorText, cssText, 0);

}

removeKeyframeRule: function (keyframes) {

var length = keyframes.cssRules.length;

var keyframeString = [];

for (var i = 0; i < length; i++) {

keyframeString.push(keyframes.cssRules[i].keyText);

}

//移除動畫幀規(guī)則

for (var i = 0, j = length; i < j; i++) {

if (this.browserPrefix == "webkit" || this.browserPrefix == "Moz")

keyframes.deleteRule(keyframeString[i]);

else

keyframes.deleteRule(i); //兼容IE

}

changeAnimationStatus: function (animationName, startStatus, endStatus) {

var keyframes = this.findKeyframesRule(animationName);

this.removeKeyframeRule(keyframes);

//重新設(shè)置幀規(guī)則

var prefix = this.browserPrefix == "" ? "" : "-" + this.browserPrefix + "-";

keyframes.appendRule("0% { " + prefix + "transform: " + startStatus + "; }");

keyframes.appendRule("100% { " + prefix + "transform: " + endStatus + "; }");

createSheets: function () {

// 創(chuàng)建 <style> 標(biāo)簽

var style = document.createElement("style");

// 可以添加一個媒體(/媒體查詢,media query)屬性

// style.setAttribute("media", "screen")

// style.setAttribute("media", "only screen and (max-width : 1024px)")

// 對WebKit hack :(

style.appendChild(document.createTextNode(""));

// 將 <style> 元素加到頁面中

document.head.appendChild(style);

return style.sheet;

prefixedEvent: function (element, type, callback, isAdd) {

var pfx = ["webkit", "moz", "MS", "o", ""];

for (var p = 0; p < pfx.length; p++) {

if (!pfx[p]) type = type.toLowerCase();

if (isAdd)

element.addEventListener(pfx[p] + type, callback, false);

else

element.removeEventListener(pfx[p] + type, callback, false);

}

start: function () {

this.css();

this.prefix();

this.create3dScene();

this.createMagicCube();

this.drawBackGroundColor();

this.bindAnimationEvent();//綁定動畫播放完成事件

this.moveMagicCube(); //立即開始動畫

// this.timer = setInterval(this.timerFun, 100);

timerFun: function () {

var _this = cache.magicCube;

if (_this.isRunning >= _this.dimension) {

for (var i = 0, len = _this.cubeMoveQueue.length; i < len; i++) {

var animation = _this.cubeMoveQueue.shift();

animation.cube.Box.style[_this.browserPrefix + "Animation"] = animation.rule + " 2s linear 1"; // Chrome, Safari 和 Opera 代碼

}

css: function () {

var d = document,

doc = d.documentElement,

body = d.body;

this.clientWidth = doc.clientWidth;

this.clientHeight = doc.clientHeight;

if (d.compatMode != "CSS1Compat") {

this.clientWidth = body.clientWidth;

this.clientHeight = body.clientHeight;

}

// console.log(this.width +'////'+ this.height)

random: function (min, max) {

return (Math.random() * (max - min + 1) + min) >> 0;

prefix: function () {

var N = navigator.appName, ua = navigator.userAgent, tem;

var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);

if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];

M = M ? [M[1], M[2]] : [N, navigator.appVersion, '-?'];

M = M[0];

if (M == "Chrome") { this.browserPrefix = "webkit"; }

if (M == "Firefox") { this.browserPrefix = "Moz"; }

if (M == "Safari") { this.browserPrefix = "webkit"; }

if (M == "MSIE") { this.browserPrefix = "ms"; }

}

};

}(window));

</script>

</head>

var cube = new magicCube({ parent: null, dimension: 3, cubWidth: 100, cubHidth: 100, marginLeft: 10, marginTop: 10, marginZ: 10, cubZ: 100 });

</script>

</body>

</html>

注：在此基礎(chǔ)上可以加上鼠標(biāo)控制事件，可以直接通過鼠標(biāo)控制器任意方向的旋扭，也可以稍加改進(jìn)用于炫酷展示圖片！后續(xù)有時間我將加上這些功能，與大家再次分享！

更多信息請查看網(wǎng)絡(luò)編程

上一篇：JavaScript正則表達(dá)式匹配 div style標(biāo)簽

下一篇：基于javascript html5實(shí)現(xiàn)3D翻書特效

易賢網(wǎng)手機(jī)網(wǎng)站地址：原生javascript+css3編寫的3D魔方動畫旋扭特效

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實(shí)現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機(jī)號
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合