资讯专栏INFORMATION COLUMN

CSS3 3D transform变换 视差滚动效果学习

el09xccxy / 2817人阅读

摘要:变换视差滚动效果学习在学习如何做到视差滚动效果时,阅读了张鑫旭老师的文章,记录下学习视差滚动变换的几个理解点。视差滚动中的计算,画一个草图即可得知,是舞台视觉平面抬起向你而来的距离,而是元素后退的距离离你而去,所以

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

相关文章

  • 3D 视差效果

    摘要:前一周敢玩新版端上线,其中原创视频封面用的就是上图的效果,下面详细说一下怎么实现起因这个效果有着相对较好的用户体验,在的基础上又有了与用户交互的体验,仿佛用户一直在不同角度按压这张图片。 showImg(https://segmentfault.com/img/bVG94Y?w=586&h=503); 前一周敢玩新版PC端上线,其中原创视频封面用的就是上图的效果,下面详细说一下怎么实现...

    DobbyKim 评论0 收藏0
  • 前端培训-初级阶段(5 - 8)

    摘要:前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是,表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTM...

    PAMPANG 评论0 收藏0
  • 前端培训-初级阶段(5 - 8)

    摘要:前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是,表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTM...

    gaosboy 评论0 收藏0
  • 可能是最全的前端动效库汇总

    摘要:非常的庞大,而且它是完全为设计而生的动效库。它运行于纯粹的之上,是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具,它支持大量的浏览器,只要它们支持和特性。可以通过安装吊炸天了,接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28,★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库,是许多基础动...

    afishhhhh 评论0 收藏0

发表评论

0条评论

el09xccxy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<