Html CSS transform matrix3d 3D转场特效

透视矩阵

       2n/(r-l)    0      (r+l)/(r-l)    0
0 2n/(t-b) (t+b)/(t-b) 0
0 0 (n+f)/(n-f) 2fn/(n-f)
0 0 -1 0

t、b、l、r 分别代表camera投影面的上下左右,camera指向-z方向(指向屏幕内),n为近景距离,f为远景距离。

Y轴旋转矩阵

            cos(θ)  0  sin(θ)  0
0 1 0 0
-sin(θ) 0 cos(θ) 0
0 0 0 1

转场效果



主要步骤:

    let w = 1024;
let h = 576;
// 1/2宽作为近景在 X-O-Z 平面上,可以刚好使图像左右两边到camera的夹角为直角,
// 且3个点组成的三角形为等腰直角三角形,便于后面计算。
let n = -w / 2;
let f = -w * 1000; let r = 1;
let l = -1;
let t = 1;
let b = -1; let m00 = 2 * n / (r - l);
let m02 = (r + l) / (r - l); //0
let m11 = 2 * n / (t - b);
let m12 = (t + b) / (t - b); //0
let m22 = (n + f) / (n - f);
let m23 = 2 * f * n / (n - f);
let m32 = -1; const aperspect = math.matrix([
[m00, 0, m02, 0],
[0, m11, m12, 0],
[0, 0, m22, m23],
[0, 0, m32, 0]
])
const aperspectT = math.transpose(aperspect); var change3d = (rfactor, dfactor, mSlide) => {
//thet θ,图像距离近景越近,图像完全移出画布的角度越逼近于90度,越远越接近45度。
let thet = 1 / 2 * rfactor * Math.PI;
const rotationYT = math.matrix([
[Math.cos(thet), 0, -Math.sin(thet), 0],
[0, 1, 0, 0],
[Math.sin(thet), 0, Math.cos(thet), 0],
[0, 0, 0, 1]
])
let result = math.identity(4);
//把图像移动至原点(0, 0),方便计算绕Y轴旋转
//若拉远至近景距离的2倍,视觉上为图像缩小1倍
const transOT = math.matrix([
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[-w / 2, -h / 2, -w / 2 * dfactor, 1]
]);
result = transOT;
//y旋转
result = math.multiply(result, rotationYT);
//透视
result = math.multiply(result, aperspectT);
//还原至画布中央
const transCenterT = math.matrix([
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[w / 2, h / 2, 0, 1]
]);
result = math.multiply(result, transCenterT);
let mStr = math.flatten(result)._data.join(',');
mSlide.style.transform = `matrix3d(${mStr})`
}

另外 CSS transform matrix3d 的值为列向量计算矩阵的转置,上面全部使用转置矩阵来计算。

   matrix3d(
a1, b1, c1, d1,
a2, b2, c2, d2,
a3, b3, c3, d3,
a4, b4, c4, d4)

还需要引入math.js文件。

DEMO 地址

参考文献:

  1. 3D游戏与计算机图形学中的数学方法-视截体
  2. 透视投影矩阵推导
  3. 三维旋转矩阵
  4. 旋转矩阵

Html CSS transform matrix3d 3D转场特效的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  3. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

  5. EDIUS设置3D转场的教程

    当你们学习完了EDIUS 2D转场自定义后,一定也想了解3D是如何自定义的吧!其实用法都差不多,下面就和小编我一起来学习下EDIUS 3D转场自定义设置吧! 1.首先我们还是做好自定义转场的准备工作. ...

  6. 关于transform的3D变形函数

    继续transform的3D用法: translate3d(x,y,z)定义3D转换 transformX(x)只用x轴的值进行转换: transformY(y)只用y轴的值进行转换: transfo ...

  7. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  8. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  9. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

随机推荐

  1. ISO/IEC 9899:2011 条款6.3——转换

    6.3 转换 1.有些操作符将操作数的值自动地从一种类型转换为另一种.本子条款指定了从这么一个隐式转换所要求的结果,以及从一个投射操作(一个显式转换)所要求的结果.在6.3.1.8中所列出的信息概括了 ...

  2. 从Windows转mac遇到的一些坑

    本屌由于运气,分了一台imac来办公,由于以前一直都在用windows,现在用Mac有很多不适应的地方.下面介绍一下Mac与Windows有明显区别的地方: mac与windows鼠标滑轮方向不同. ...

  3. snmp oid 和厂商对应关系

    <node oid="default" name="Unknown" type="workstation"/><node ...

  4. nginx client_body_buffer_size

    http://www.bubuko.com/infodetail-1760832.html 上传文件过大时,nginx会报链接里面的warn,请求body写磁盘到缓存文件,导致性能降低,可适当调大该参 ...

  5. 亲爱的mssql码农们,看看利用sp_addlinkedserver实现远程数据库链接

    亲爱的mssql码农们,可以看看本地连接远程的数据库方式(sp_addlinkedserver)--通过代码连接 --查看当前链接情况: select * from sys.servers; --使用 ...

  6. 【Leetcode_easy】914. X of a Kind in a Deck of Cards

    problem 914. X of a Kind in a Deck of Cards 题意:每个数字对应的数目可以均分为多组含有K个相同数目该数字的数组. 思路:使用 map 结构记录数组中每个元素 ...

  7. Actor模型的状态(State)+行为(Behavior)+邮箱(Mailbox)

    状态(State)+行为(Behavior)+邮箱(Mailbox) 基于Actor模型的CQRS.ES解决方案分享 开场白 大家晚上好,我是郑承良,跟大家分享的话题是<基于Actor模型的CQ ...

  8. 超类Object

    Object:是类层次结构中的跟类,所有类都直接货间接继承自该类 如果一个方法的形参是Object,那么这里我们就可以传递它的任意的子类对象,相当于传任何数据类型都可以 toString()——返回地 ...

  9. [Oracle] - 使用 EXP / IMP 对数据库进行备份与还原

    只有Oracle客户端环境,如何完整备份数据库? 方法1:在本地搭建与目标环境相同版本的服务端,远程访问执行导出命令.这种方式远程备份速度较慢(VPN环境下测试). 方法2:登陆客户端,先导出数据库表 ...

  10. 在CentOS下搭建GoLang开发环境

    下载安装包 [vagrant@dk ~]$ wget http://mirrors.ustc.edu.cn/golang/go1.13.linux-amd64.tar.gz 使用USTC 中科大开源镜 ...