CSS3具备一些属性,这些属性能够创造出引人入胜的3D视觉效果。当我们将这些3D特性巧妙地应用于图片之上,图片便能焕发出立体般的生命力。今天,我要向大家展示的是一款利用CSS3精心打造的3D倾斜视差图片特效,它不仅在图片上方巧妙地悬浮了文字标题,还在图片周围添加了逼真的投影效果。更为神奇的是,这款特效还能随着鼠标的移动,呈现出令人惊艳的3D视差变化。有需要的可以研究下
效果演示:
六月是只猫
3D倾斜视差效果
![](https://www.lyszm.com/img/3D%E5%8A%A8%E7%94%BB/3D%E8%A7%86%E5%B7%AE/img/3dr_mono.png)
Princess Mononoke
![](https://www.lyszm.com/img/3D%E5%8A%A8%E7%94%BB/3D%E8%A7%86%E5%B7%AE/img/3dr_chihiro.png)
Spirited Away
![](https://www.lyszm.com/img/3D%E5%8A%A8%E7%94%BB/3D%E8%A7%86%E5%B7%AE/img/3dr_howlcastle.png)
Howl's Moving Castle
(PS.因本站文章页太窄故手机端显示可能不正常,PC端可滑动鼠标方向测试此源码的演示效果)
源码下载:
你这个不错哦![](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEyIDIyQzYuNDc3IDIyIDIgMTcuNTIzIDIgMTJTNi40NzcgMiAxMiAyczEwIDQuNDc3IDEwIDEwLTQuNDc3IDEwLTEwIDEwem0wLTJhOCA4IDAgMSAwIDAtMTYgOCA4IDAgMCAwIDAgMTZ6bS01LTdoMmEzIDMgMCAwIDAgNiAwaDJhNSA1IDAgMCAxLTEwIDB6bTEtMmExLjUgMS41IDAgMSAxIDAtMyAxLjUgMS41IDAgMCAxIDAgM3ptOCAwYTEuNSAxLjUgMCAxIDEgMC0zIDEuNSAxLjUgMCAwIDEgMCAzeiIgZmlsbD0icmdiYSgxNDksMTY0LDE2NiwxKSIvPjwvc3ZnPg==)
暂无点赞
6666
暂无点赞
6
暂无点赞