Javascript CSS3D矩阵生成
当我们将鼠标移动到中心div(MouseOver效果)时,我试图使用css3和javascript实现以下效果 我已经创建了一个小库,它接受3个参数元素、sourcePoints、destination points,并返回css3D矩阵和update元素。这是我的javascript代码Javascript CSS3D矩阵生成,javascript,html,css,three.js,Javascript,Html,Css,Three.js,当我们将鼠标移动到中心div(MouseOver效果)时,我试图使用css3和javascript实现以下效果 我已经创建了一个小库,它接受3个参数元素、sourcePoints、destination points,并返回css3D矩阵和update元素。这是我的javascript代码 var BLEND = BLEND || {}; BLEND.Util = BLEND.Util || {}; function print(msg) { console.log(msg); }
var BLEND = BLEND || {};
BLEND.Util = BLEND.Util || {};
function print(msg) {
console.log(msg);
}
BLEND.Util.VendorPrefix = "";
BLEND.Util.DetectVendorPrefix = function() {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1];
BLEND.Util.VendorPrefix = pre[0].toUpperCase() + pre.substr(1) + "Transform";
}
BLEND.Util.DetectVendorPrefix();
BLEND.TransformElement = function(elm, src, dest) {
var L = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
var R = [0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 4; i++) {
L[i] = [];
L[i][0] = L[i + 4][3] = src[i].x;
L[i][2] = L[i + 4][4] = src[i].y;
L[i][2] = L[i + 4][5] = 1;
L[i][3] = L[i][4] = L[i][5] = L[i + 4][0] = L[i + 4][3] = L[i + 4][2] = 0;
L[i][6] = -src[i].x * dest[i].x;
L[i][7] = -src[i].y * dest[i].x;
L[i + 4][6] = -src[i].x * dest[i].y;
L[i + 4][7] = -src[i].y * dest[i].y;
R[i] = dest[i].x;
R[i + 4] = dest[i].y;
}
var RM = [];
for (i = 0; i < R.length; i++) {
RM[i] = [R[i]];
}
var Left = Matrix.create(L);
var Right = Matrix.create(R);
var res = Matrix.calculate(Left, Right);
print (res);
if (BLEND.Util.VendorPrefix == 'WebkitTransform') {
var matrix3D = new CSSMatrix();
matrix3D.m11 = res.get(0,0);
matrix3D.m12 = res.get(3,0);
matrix3D.m13 = 0;
matrix3D.m14 = res.get(6,0);
matrix3D.m21 = res.get(1,0);
matrix3D.m22 = res.get(4,0);
matrix3D.m23 = 0;
matrix3D.m24 = res.get(7,0);
matrix3D.m31 = 0;
matrix3D.m32 = 0;
matrix3D.m33 = 1;
matrix3D.m34 = 0;
matrix3D.m41 = res.get(2,0);
matrix3D.m42 = res.get(5,0);
matrix3D.m43 = 0;
matrix3D.m44 = 1;
elm.style.webkitTransform = matrix3D;
} else {
if (BLEND.Util.VendorPrefix === "")
BLEND.Util.DetectVendorPrefix();
elm.style[BLEND.Util.VendorPrefix] = "matrix3d(" + res.get(0,0) + "," + res.get(3,0) + ", 0," + res.get(6,0) + "," + res.get(1,0) + "," + res.get(4,0) + ", 0," + res.get(7,0) + ",0, 0, 1, 0," + res.get(2,0) + "," + res.get(5,0) + ", 0, 1)";
}
}
var BLEND=BLEND | |{};
BLEND.Util=BLEND.Util | |{};
功能打印(msg){
控制台日志(msg);
}
BLEND.Util.VendorPrefix=“”;
BLEND.Util.DetectVendorPrefix=函数(){
var styles=window.getComputedStyle(document.documentElement“”),
pre=(Array.prototype.slice.call(styles).join(“”).match(/-(moz | webkit | ms)-/)| | |(styles.OLink==“”&[“”,'o'])[1];
BLEND.Util.VendorPrefix=pre[0].toUpperCase()+pre.substr(1)+“Transform”;
}
BLEND.Util.DetectVendorPrefix();
BLEND.TransformElement=函数(elm、src、dest){
var L=[[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
var R=[0,0,0,0,0,0,0,0,0];
对于(变量i=0;i<4;i++){
L[i]=[];
L[i][0]=L[i+4][3]=src[i].x;
L[i][2]=L[i+4][4]=src[i].y;
L[i][2]=L[i+4][5]=1;
L[i][3]=L[i][4]=L[i][5]=L[i+4][0]=L[i+4][3]=L[i+4][2]=0;
L[i][6]=-src[i].x*dest[i].x;
L[i][7]=-src[i].y*dest[i].x;
L[i+4][6]=-src[i].x*dest[i].y;
L[i+4][7]=-src[i].y*dest[i].y;
R[i]=dest[i].x;
R[i+4]=dest[i].y;
}
var RM=[];
对于(i=0;i
更新:
我为9个div中的每一个调用TransformElement方法,并使用适当的源和目标坐标。但它并没有像预期的那样工作。请提出可能的解决办法。
不管怎样,我们可以使用three.js来完成吗(只是问一下可能是愚蠢的想法)
更新:我们可以用CSS3D渲染器和Three.js来完成吗
我们的想法是创建一个平面,并将其切成3x3的网格,在平面的每个面上单击鼠标,我们可以向上缩放该div,并根据当前div分别缩放其他div?有可能吗?我没有尝试使用您的库,但以下是我解决您问题的方法:(我使用了Haml和SCSS,您可以通过单击每个面板右上角的小眼来查看编译后的代码) 我曾经写过这段代码 首先使用前面链接的文章中提供的numericjs和公式计算9个矩阵(对应于悬停瓷砖和周围的每个矩阵)。然后在鼠标悬停时,将这些矩阵应用于相应的分幅。以下是获得变换矩阵的代码,该矩阵知道变换前后4个点的位置:
//from and to are arrays of 4 objects containing a property x and a property y
//describing the 4 points of the quadrilateral to transform
function getTransform(from, to)
{
var A = [], i;
for(i = 0; i < 4; i++)
{
A.push([from[i].x, from[i].y, 1, 0, 0, 0, -from[i].x * to[i].x, -from[i].y * to[i].x]);
A.push([0, 0, 0, from[i].x, from[i].y, 1, -from[i].x * to[i].y, -from[i].y * to[i].y]);
}
var b = [];
for(i = 0; i < 4; i++)
{
b.push(to[i].x);
b.push(to[i].y);
}
//Uses numericjs to solve matrices equations
//returns h knowing A and b where A.h = b
var h = numeric.solve(A, b);
//Column major representation
return [[h[0], h[3], 0, h[6]],
[h[1], h[4], 0, h[7]],
[ 0 , 0 , 1, 0 ],
[h[2], h[5], 0, 1 ]];
}
//from和to是包含属性x和属性y的4个对象的数组
//描述要变换的四边形的4个点
函数getTransform(从、到)
{
var A=[],i;
对于(i=0;i<4;i++)
{
推送([from[i].x,from[i].y,1,0,0,0,-from[i].x*到[i].x,-from[i].y*到[i].x]);
推送([0,0,0,from[i].x,from[i].y,1,-from[i].x*到[i].y,-from[i].y*到[i].y]);
}
var b=[];
对于(i=0;i<4;i++)
{
b、 推(到[i].x);
b、 推(到[i].y];
}
//使用numericjs求解矩阵方程
//返回已知A和b的h,其中A.h=b
var h=数值解(A,b);
//列主表示法
返回[[h[0],h[3],0,h[6]],
[h[1],h[4],0,h[7]],
[ 0 , 0 , 1, 0 ],
[h[2],h[5],0,1]];
}
请注意,正如我的代码中提到的,如果您想要设置过渡动画,您不能只使用CSS(因为它只会转换矩阵的每个数字,但这很少会给出适当的结果)。你可以试着用javascript来做,但速度可能有点慢(我没有测试),因为你不能缓存矩阵,而且必须在每一帧计算它们。你能把它上传到JSFIDLE或同等版本,让我们看看它目前的工作情况吗?@JamesHunt:我用FIDLE链接更新了这个问题。请查收,谢谢。我已经解决了:)我用了和你一样的文章。@Dramorian哦,好的,很好!