jQuery实现可拖拽3D万花筒旋转特效

前端之家收集整理的这篇文章主要介绍了jQuery实现可拖拽3D万花筒旋转特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。

进去后可以上下左右的拖动图片

本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素。

默认值:flat

继承性:no

版本:CSS3

JavaScript 语法:object.style.transformStyle="preserve-3d"

有2个属性值可选择:

flat子元素将不保留其 3D 位置。

preserve-3d子元素将保留其 3D 位置。

示例代码如下:

<Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> jQuery可拖拽3D万花筒旋转特效 - 何问起

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的jQuery相关文章