利用CSS3以及一些简单的JS逻辑,实现一个可拖拽的3D拖拽旋转带倒影相册
相册的 逻辑部分是基于Jquery实现的,先看一下效果图,出生动画为卷帘式, 可以对相册进行3D无死角拖拽旋转😆。
图片来自网络, 别当真…🥺

-
主要用到的
CSS3属性/* 景深 */ perspective: 800px; /* 径向渐变 */ background: -webkit-radial-gradient(center center, 800px 800px, rgba(244, 34, 0, 0.3), rgba(0, 0, 0, 1)); /* 3D场景 */ transform-style: preserve-3d; /* 元素动画 */ transform: rotateX(-15deg) rotateY(0deg); /*倒影:朝向 偏移 遮盖 */ -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%); -
主要用到的
javascript逻辑
页面资源加载完毕初始化图片的旋转终点、相对屏幕的高度,设置每张图片的动画延迟,达到一种卷帘式展开的效果。
涉及事件:鼠标按下、移动、抬起,通过获取鼠标按下及抬起两种状态下坐标的差值,计算相应的旋转角度。
惯性移动:鼠标抬起事件,可以添加一个延时器,自定义惯性系数,让旋转角度不断减小,一定范围时清除,达到类似惯性运动的效果。
代码部分:
- CSS样式
<style>
/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
}
/* 背景 */
html,
body {
height: 100%;
width: 100%;
/* 径向渐变 */
background: -webkit-radial-gradient(center center, 800px 800px, rgba(244, 34, 0, 0.3), rgba(0, 0, 0, 1));
overflow: hidden;
}
.container {
/* 景深 */
perspective: 800px;
}
/* 图片盒子 */
.imgBox {
width: 120px;
height: 180px;
position: relative;
margin: 220px auto 0;
/* 3D场景 */
transform-style: preserve-3d;
/* 元素动画 */
transform: rotateX(-15deg) rotateY(0deg);
}
/* 图片样式 */
.imgBox img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
border: 2px solid #97FFFF;
box-shadow: 0 0 5px #F0E68C;
/* 初始化旋转角度 */
tra

本文介绍如何使用CSS3创建一个3D旋转带倒影的相册,出生动画采用卷帘式设计,允许用户进行3D无死角拖拽旋转。主要涉及的CSS属性包括transform和perspective,同时结合jQuery实现鼠标事件处理,如按下、移动和抬起,以实现平滑的旋转效果。在鼠标抬起后,通过延时器模拟惯性运动。代码包含CSS样式、DOM结构和jQuery逻辑,并强调了DOM加载完毕后初始化的重要性。
最低0.47元/天 解锁文章
5万+

被折叠的 条评论
为什么被折叠?



