搜 索

SVG交互设计——视差滑动

  • 136阅读
  • 2022年07月31日
  • 0评论
首页 / SVG交互🎠 / 正文

基本原理

设置3D空间场景

激活透视效果: perspective

激活 3D 空间: transform-style:preserve-3d

设置Z轴的位移距离

设置 translateZ 的位移距离

营造近大远小,近快远慢的效果,如果有需要可以再增加位置、角度等参数。

基本元素

perspective

观察元素的距离,用于激活透视效果。

perspective:50px; 值越小,透视距离越近,效果越明显。

perspective 属性给父元素设置。

1.png

transform-style:preserve-3d

指定元素嵌套在三维空间中呈现。

transform-style:flat | preserve-3d

此元素给子元素设置,对子元素的子元素无效。

2.png

translateZ

表示元素在Z轴方向的位移

translateZ(-20px) 值越小,子元素显示的越小,运动的越慢。

注意: perspective 的值需要大于 translateZ

3.png

打 赏
  • 支付宝
  • 微信
  • QQ
Alipay
WeChatPay
QQPay
评论区
暂无评论
avatar