摘要：变换视差滚动效果学习在学习如何做到视差滚动效果时，阅读了张鑫旭老师的文章，记录下学习视差滚动变换的几个理解点。视差滚动中的计算，画一个草图即可得知，是舞台视觉平面抬起向你而来的距离，而是元素后退的距离离你而去，所以
CSS3 3D transform变换 视差滚动效果学习
在学习css如何做到视差滚动效果时，阅读了张鑫旭老师的文章，记录下学习视差滚动 and 3D transform变换的几个理解点。
1.复习笛卡尔坐标系的概念，下面这张图的Y方向应该标反了，关于笛卡尔坐标系的知识可以维基下Cartesian coordinates，复习下笛卡尔坐标系的方向判断后，rotateX,Y,Z理解起来就非常轻松了。
2.在之后是关于perspective这个属性的内容，原文下面的图开始有些难以理解，两种书写方式为什么会造成这样的差异，这里可以这样理解：
如果你只给stage设置了perspective属性，相当于就只有一个观看者，而perspective-origin是初始视觉点，默认为(50%，50%),即在这个观看平面的中央。所以当只有一个观看者，面对n扇y轴倾斜45°的门，可以自己模拟测试下，每扇门的可视面积是不一样的。也会存在某一扇门与你转头看过去的视线角度是平行的，从而“消失”了。
而给子元素也设置了perspective属性后，相当于每一扇门前都有一个你，所以每扇门的可视面积是一样的。
3.视差滚动中scale的计算，画一个草图即可得知，perspective是舞台视觉平面抬起（向你而来）的距离，而translateZ是元素后退的距离（离你而去），所以scale = |translateZ|/perspective.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116656.html
摘要：前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是，表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是，表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...
阅读 2062·2021-11-23 09:51
阅读 2814·2021-11-22 15:35
阅读 2911·2019-08-30 15:53
阅读 1010·2019-08-30 14:04
阅读 3250·2019-08-29 12:39
阅读 1741·2019-08-28 17:57
阅读 1035·2019-08-26 13:39
阅读 534·2019-08-26 13:34
