3D图片滑块CSS3动态效果
3D 视角的图片滑块效果,视觉冲击感挺强的,尤其适合做作品集、首页 banner 这种吸睛的地方。核心用的是CSS3 的 transform加上JavaScript来控制交互,能实现像rotateY
、translateZ
这类 3D 变换。操作起来也不复杂,样式和逻辑分离得比较清楚。
HTML 结构一般用
- +
- 的形式,把每张图片包成
- ,再统一加上动画。重点是容器上记得设置perspective,不然 3D 效果就扁了。还有一个细节,backface-visibility要设好,不然图片翻转时背面会乱闪。
JS 部分可以用原生写,也可以借助jQuery,像
$('.slider-item').on('click', fn)
这样监听切换事件就挺方便。建议搭配transition
做个过渡,交互起来更顺滑。兼容性方面,老浏览器对3D transform支持不太好,记得加上
-webkit-
、-moz-
这些前缀,甚至给个 2D 回退方案兜底。顺带一提,如果你打算做移动端支持,手势滑动可以考虑加上Hammer.js这种库。要想玩得花点,可以加个自动轮播、图片预加载、底部小圆点导航啥的。配合 CSS 动画,整个滑块就会更有高级感。想看更多玩法?推荐你看看这些:
如果你正好有个展示型项目,不妨试试这个 3D 滑块,视觉效果真的是一试就爱上。
下载地址
用户评论