正文 

当前位置： 首页 > 问答 >

CSS3D 矩阵生成

     2023-02-27     77

关键词：

【中文标题】CSS3D 矩阵生成【英文标题】：CSS3D matrix generation 【发布时间】：2015-02-15 23:06:32 【问题描述】：

当我们将鼠标移动到中心 div 时，我正在尝试使用 css3 和 javascript 实现以下效果（MouseOver 效果）

我创建了一个小型库，它接受 3 个参数元素、源点、目标点并返回 css3D 矩阵和更新元素。这是我的 javascript 代码。

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)";

更新： Here is JSFiddle

我正在为 9 个具有正确源和目标坐标的 div 中的每一个调用 TransformElement 方法。但它没有按预期工作。请提出可能的解决方案。 无论如何我们都可以使用 three.js 来做吗（只是问可能是它的愚蠢想法）？

更新：我们可以用 CSS3D 渲染器和 Three.js 来做吗？

想法是创建平面并将其切成 3x3 网格，然后将鼠标悬停在平面的每个面上，我们可以向上缩放该 div，并且我们必须分别根据当前 div 缩放其他 div？有可能吗？

【问题讨论】：

你能把它上传到 JSFiddle 或类似的地方让我们看看它目前是如何工作的吗？ @JamesHunt：我已经用小提琴链接更新了这个问题。请检查。 【参考方案1】：

我没有尝试使用您的库，但这是我对您的问题的解决方案：http://codepen.io/bali_balo/pen/87b980a2acf722b1c9feb35f3fcb1c65/（我使用了 Haml 和 SCSS，您可以通过单击每个面板右上角的小眼睛查看已编译的代码）

我用this article写了这段代码。

首先计算 9 个矩阵（对应于悬停的磁贴和每个周围的磁贴），使用之前链接的文章中提供的 numericjs 和公式。然后在鼠标悬停时，这些矩阵将应用于相应的图块。下面是获取变换矩阵的代码，知道变换前后 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  ]];

请注意，正如我的代码中提到的，如果您想要动画转换，您不能只使用 CSS（因为它只会转换矩阵的每个数字，但这很少会给出适当的结果）。您可以尝试使用 javascript 执行此操作，但它可能会有点慢（我没有测试它），因为您无法缓存矩阵并且必须在每一帧都计算它们。

【讨论】：

感谢巴厘岛。我已经解决了：）***.com/questions/27604916/…我使用的文章和你的一样。 @Dramorian 哦，好的，很好！

Matlab 生成矩阵

】Matlab生成矩阵【英文标题】：MatlabGeneratingaMatrix【发布时间】：2011-09-2517:05:32【问题描述】：我正在尝试在matlab中生成一个矩阵，我将用它来求解多项式回归公式。这是我尝试生成矩阵的方式：我有一个包含N个元素和一个整数... 查看详情

css3d转换调试

css3d测试工具效果如图：代码如下：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="renderer"content="webkit"&g 查看详情

如何生成组合矩阵

】如何生成组合矩阵【英文标题】：Howtogenerateamatrixofcombinations【发布时间】：2011-04-2822:58:12【问题描述】：我有5个项目，每个项目的值可以是1或-1。我想生成一个由可能组合的行组成的矩阵。项目的顺序无关紧要，组合的顺序... 查看详情

css3d效果文本(代码片段)

查看详情

matlab有多少api函数

...举其中的一部分较为常用的api函数。1.sym函数--定义符号矩阵2.syms函数--定义矩阵的又一函数3.sym的另一职能--把数值矩阵转化成相应的符号矩阵4.cat函数--创建多维数组5.zeros函数--零矩阵的生成6.eye函数--单位矩阵的生成7.ones函数--... 查看详情

css3d的魅力

...总结一下。 在阅读这篇博客之前，请先自行了解一下css3D的属性，例如：transform-style，transform-origin，transform,perspective。 demo1&n 查看详情

css3d总结

3d容器-舞台必须同时设置transform-style:preserve-3d; 　　　　　　 perspective:length;不可设置 overflow:hidden(其如同transform-style:flat;)隐藏后背元素backface-visibility:hidden; transform-style:preserve-3d只影响这个元素的子元素，孙 查看详情

如何用python生成多个随机矩阵

在Python里，如何生成多个不同的随机矩阵，就是需要一个循环，可以不断生成新的随机矩阵。比如说，我想生成10个2*2的随机矩阵，每个都不同，我不想把这行指令复制黏贴十遍。求大神帮忙！！！！！numpy.random包可以实现这一... 查看详情

css3d动画

一、今天让我们来学习一下css3D吧！1.首先我们要学习好css33d一定要有一定的立体感！2.再来那就聊聊原理吧！3.css33d顾名思义是由两个2d名片组成的但不是让你建立连个2d啊！一个div要想又3d效果那就得在最外层建立一个3d平面.tran... 查看详情

R - 给定一个矩阵和一个幂，生成多个矩阵，其中包含矩阵列的所有组合

】R-给定一个矩阵和一个幂，生成多个矩阵，其中包含矩阵列的所有组合【英文标题】：R-Givenamatrixandapower,producemultiplematricescontainingallcombinationsofmatrixcolumns【发布时间】：2018-08-0115:10:22【问题描述】：给定一个矩阵mat（大小为NbyM... 查看详情

tensorflow之矩阵初始化

...技术A用TensorFlow训练网络时，经常需要初始化指定内容的矩阵，所以这里把常用的初始化方法总结出来。其它平台例如Caffe、PyTorch都能用到这里的思想，方法都是类似的，还有常用的numpy库也是一样的，重要的是理解。生成指定sh... 查看详情

从numpy python中的稀疏矩阵生成密集矩阵

】从numpypython中的稀疏矩阵生成密集矩阵【英文标题】：Generatingadensematrixfromasparsematrixinnumpypython【发布时间】：2013-05-0612:28:45【问题描述】：我有一个包含以下类型架构的Sqlite数据库：termcount(doc_num,term,count)此表包含术语及其在... 查看详情

矩阵生成树

对于每条连边i->j,a[i][j]--,a[i]++对无向图有向图同时成立求矩阵det即可--------------------BZOJ3659wikipeida:Wedenotethesein-andout-degreeofavertex v bydeg(v).TheBESTtheoremstatesthatthenumberec(G)ofEuleriancircu 查看详情

prim和kruskal最小生成树

...： 2000ms内存限制： 15000K总时限： 3000ms描述： 给出一个矩阵，要求以矩阵方式单步输出生成过程。要求先输出Prim生成过程，再输出Kruskal,每个矩阵输出后换行。注意，题中矩阵表示无向图输入： 结点数矩阵输出： Prim:矩阵输出K... 查看详情

Java - 生成和旋转矩阵

】Java-生成和旋转矩阵【英文标题】：Java-generateandrotatematrix【发布时间】：2022-01-1606:41:03【问题描述】：最近我正在尝试学习一点Java，目前，我正在开发一个简单的程序，该程序应该生成一个矩阵然后旋转它。我被困在第一部... 查看详情

Python：为大量位置生成距离矩阵

】Python：为大量位置生成距离矩阵【英文标题】：Python:generatedistancematrixforlargenumberoflocations【发布时间】：2019-10-0915:10:21【问题描述】：我想根据500个位置的纬度和经度，使用Haversine公式生成一个距离矩阵500X500。这是10个位置的... 查看详情

numpy的生成网格矩阵meshgrid()(代码片段)

numpy模块中的meshgrid函数用来生成网格矩阵，最简单的网格矩阵为二维矩阵meshgrid函数可以接受x1,x2,...,xn等n个一维向量，生成N-D矩阵。1基本语法meshgrid(*xi,**kwargs)参数：xi- x1,x2,...,xn:array_like返回值： X1,X2,...,XN:ndarray2示例2.1... 查看详情

css3d菜单[html\css](代码片段)

查看详情