实现效果

3D透视图演示

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3D透视图</title>
</head>
<body><div id="position"><div id="scale"><div id="container"></div> /* 图片容器 */<div id="scaleCur"></div> /* 用来缩放图片 */</div></div>
</body>

CSS代码

<style>#position {background-color:slategray;}#scale {position: absolute;display: grid;grid-template-columns: auto 10px;grid-template-rows: auto 10px;width: 760px;height: 460px;background-color: black;}#container {grid-column: 1/2;grid-row: 1/2;transform-style: preserve-3d;}#scaleCur {grid-column: 2/3;grid-row: 2/3;background-color: black;cursor: se-resize;}img {display: block;position: absolute;transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);}#center {transform: translateZ(300px);   transition: transform 1s linear;}</style>

JavaScript代码

<script>window.onload=function(){let scale = document.getElementById("scale");let container = document.getElementById("container");// 初始化图片let init  = function () {let containerWidth = container.clientWidth;let containerHeight = container.clientHeight;let imgiWidth = containerWidth/15;let imgiHeight = containerHeight/15;for(let i = 0; i < 225; i++) {let col = i % 15; // 计算第i个<img>位于第几列let row = Math.floor(i / 15);// 计算第i个<img>位于第几行let imgi = document.createElement("img");imgi.setAttribute("src", "./img/1.jpg");imgi.style.width = `${containerWidth}px`;imgi.style.height = `${containerHeight}px`;imgi.style.clipPath = `inset(${row*imgiHeight-1}px${(14-col)*imgiWidth-1}px${(14-row)*imgiHeight-1}px${col*imgiWidth-1}px)`;imgi.style.transformOrigin = `${col*imgiWidth-0.5*imgiWidth}px${row*imgiHeight+0.5*imgiHeight}px 0px`;container.appendChild(imgi);if (i === 112) {imgi.id = "center";let center = document.getElementById("center");center.addEventListener("click",disapperFun);}}// 消失事件function disapperFun () {center.style.transform = "translateZ(0px)";let diappeer = setTimeout(function(){let imgs = document.getElementsByTagName("img");for (let j of imgs) {j.style.opacity = 0;let dire = Math.random() > 0.5 ? 1 : -1;j.style.transform = `rotate3d(0,0,1,${dire*Math.random()*180}deg) translateZ(-500px) skew(${Math.random()*80}deg,${Math.random()*80}deg)`;}},1200);return false;}}init();// 利用立即执行函数为container添加初始transform属性值，避免transformStr获取为空(function() {container.style.transform = "rotate3d(0,0,0,0deg) perspective(2000px)";})();// 拖拽缩放事件scaleCur.onmousedown = function(event) {event.stopPropagation();let scaleWidth = scale.clientWidth;let scaleHeight = scale.clientHeight;let orignX = event.clientX;let orignY = event.clientY;document.onmousemove = function(event) {let nowX = event.clientX;let nowY = event.clientY;scale.style.width = `${scaleWidth - (orignX - nowX)}px`;scale.style.height = `${scaleHeight - (orignY - nowY)}px`;container.innerHTML = "";//清空上一次创建的图片init();//重新绘制图片}document.onmouseup = function(event) {document.onmousemove = null;document.onmouseup = null;}return false;}// 拖拽旋转事件container.onmousedown = function(event) {event.stopPropagation();let transformStr = this.style.transform;let re = /(?<=\()[\s\S]+(?=deg)/g; //正则匹配表达式，匹配transform中的rotate3d中的值let m = transformStr.match(re)[0].split(",");let [rotateX,rotateY,rotateZ,rotateAngle] = m;//保存元素初始rotate3d值let orignX = event.clientX;let orignY = event.clientY;document.onmousemove = function(event) {let nowX = event.clientX;let nowY = event.clientY;let x = orignY - nowY;let y = nowX - orignX;       let dec = Math.sqrt(Math.pow(y,2) + Math.pow(x,2));container.style.transform = `rotate3d(${Number(rotateX)+x},${Number(rotateY)+y},0,${(Number(rotateAngle)+dec)%360}deg)`;}document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;}return false;//阻止浏览器默认事件}}
</script>

项目地址

GitHub链接: frontEnd合集
其中的3Dperspective文件就是啦

使用JS和CSS实现图片的3D透视效果及动画相关推荐

以Jar形式为Web项目提供资源文件（JS、CSS与图片）
一.背景二.分析 1.把我需要的JS.CSS与图片等资源copy到Web工程中. 2.通过程序采用流的方式读取Jar中的资源流再输出到页面流. 三.分析结果四.核心代码开发(Jar端) 1.org ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
用CSS实现图片的3D凹凸感(即：凸出镜框外或凹陷镜框里)
Ⅰ.问题描述: 使用css实现图片的3D凹凸感: Ⅱ实现过程如下: 1.展示结果为: A.正常的图片(图一.图二都正常): B.图一凸出镜框外,图二正常: 触发过程:将鼠标放在图一的红色边框内,就会显 ...
html凹凸效果,用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)
Ⅰ.问题描述: 使用css实现图片的3D凹凸感: Ⅱ实现过程如下: 1.展示结果为: A.正常的图片(图一.图二都正常): B.图一凸出镜框外,图二正常: 触发过程:将鼠标放在图一的红色边框内,就会显 ...
css实现图片的3d旋转
今天的内容是,用css实现图片的3d旋转效果,效果如下: 由于不是视频上传不是很熟悉,所以用图片来简单解释,上述的图片效果,但是图片会绕着一个中心点旋转,像一个圆柱体一样. 下面是具体代码,如果有需要 ...
CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果背景通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
css实现图片的3d旋转-照片墙
一.效果图二.图片摆放 1.html 这里准备了1个section和7个div,7个div都要求定位在父元素section那里(都在中心点),每个div各一张图,上面效果图有1张在中间的,其余6张图 ...
解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题
通常把jsp页面放在webRoot的/WEB-INF下可以防止访问者直接输入页面. 而webRoot的/WEB-INF下的页面是受保护的,用户无法通过形如http://localhost:8080/t ...
拜托，使用 Three.js 让二维图片具有 3D 效果超酷的
前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景逛 sk ...
js和CSS实现图片旋转
需求大概是,鼠标移入,头像正向旋转,鼠标移除,头像逆向回转.分别用了CSS动画还有JS实现,但是JS给我感觉会好点,因为我希望实现的是鼠标进入,获取当前旋转角度,正向加旋,鼠标移除,获取当前角度,逆向 ...

使用JS和CSS实现图片的3D透视效果及动画

文章目录

实现效果

代码

HTML代码

CSS代码

JavaScript代码

项目地址

使用JS和CSS实现图片的3D透视效果及动画相关推荐

最新文章

热门文章