HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

效果演示： 文末获取源码

代码目录：

主要代码实现：

HTML代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document</title>
</head><style type="text/css">* {margin: 0;padding: 0;}.pic {width: 120px;height: 180px;border: 1px red solid;margin: 150px auto 0;position: relative;/*transform 旋转元素*/transform-style: preserve-3d;transform: perspective(800px) rotateX(-10deg) rotateY(0deg);}body {background-color: black;overflow: hidden;}.pic img {position: absolute;width: 100%;height: 100%;border-radius: 5px;box-shadow: 0px 0px 10px #fff;/*倒影的设置*/-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);}.pic p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(255, 255, 255, .5), rgba(0, 0, 0, 0));position: absolute;top: 100%;left: 50%;margin-top: -600px;margin-left: -600px;border-radius: 600px;transform: rotateX(90deg);}
</style><body><div class="pic"><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><img src="img/7.jpg" /><img src="img/8.jpg" /><img src="img/9.jpg" /><img src="img/10.jpg" /><img src="img/11.jpg" /><p></p></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function() {var imgL = $(".pic img").size();var deg = 360 / imgL;var roY = 0,roX = -10;var xN = 0,yN = 0;var play = null;$(".pic img").each(function(i) {$(this).css({<!---translateZ 定义2d旋转沿着z轴->"transform": "rotateY(" + i * deg + "deg) translateZ(300px)"});<!--防止图片被拖拽-->$(this).attr('ondragstart', 'return false');});$(document).mousedown(function(ev) {var x_ = ev.clientX;var y_ = ev.clientY;clearInterval(play);console.log('我按下了');$(this).bind('mousemove', function(ev) {/*获取当前鼠标的坐标*/var x = ev.clientX;var y = ev.clientY;/*两次坐标之间的距离*/xN = x - x_;yN = y - y_;roY += xN * 0.2;roX -= yN * 0.1;console.log('移动');//$('body').append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});/*之前的鼠标坐标*/x_ = ev.clientX;y_ = ev.clientY;});}).mouseup(function() {$(this).unbind('mousemove');var play = setInterval(function() {xN *= 0.95;yN *= 0.95if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {clearInterval(play);}roY += xN * 0.2;roX -= yN * 0.1;$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});}, 30);});});</script></body></html>

上面的图片文件和js文件需要引入

源码获取

查看博主主页或下方链接获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 43 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件或技术资料点击下方微信获取~！

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️相关推荐

HTML+CSS+JS实现 ❤️3D洞穴无限延伸动画特效❤️
使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
3d相册 html 代码_HTML5 3D立体图片相册
插件简介 HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标拖拽从多个角度浏览相册图片,点击图 ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
HTML5 3D立体图片相册
HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以 ...
3D万花筒无限延伸动画特效（源码）
HTML代码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="U ...
QQ空间相册展示特效
<!doctype html> <html lang="en"> <head> <title>QQ空间相册展示特效<title ...
PR模板使用教程线性擦除图片照片展示特效PR模板使用细节教程
PR模板使用教程关于线性擦除图片照片展示特效Premiere模板使用中的细节教程讲解先看更改后的效果,如下图所示调整方式,点击轨道上框选的素材,在效果控件里,选择缩放比例(取消等比缩放的&quo ...
HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️
效果演示: 代码目录: 主要代码实现: css样式: /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url( ...

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

效果演示：文末获取源码

代码目录：

主要代码实现：

源码获取

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️相关推荐

最新文章

热门文章

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

效果演示： 文末获取源码

代码目录：

主要代码实现：

源码获取

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️相关推荐

最新文章

热门文章

效果演示：文末获取源码