效果展示
通过鼠标拖拽可以旋转展示图片
主要逻辑
- 实现整体的3D效果主要使用两条属性:preserve-3d,3D效果, perspective,场景景深
- 做到拖拽特效分为三个步骤,鼠标按下事件,鼠标移动事件,鼠标抬起事件
- 从开始拖拽到结束拖拽,还要获得鼠标位于页面所在的开始坐标和结束坐标,再将拖拽过程中的坐标更新就完成了项目整体逻辑
代码详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS3D拖拽相册复刻1</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #000;
overflow: hidden;
}
#perspective {
perspective: 800px;
}
#wrap {
width: 120px;
height: 180px;
margin: 0 auto;
position: relative;
/* 搭建3d效果所必需的的两个属性:一个是将风格变成3d,另一个是场景景深为800px */
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(0deg);
}
#wrap img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 1px