原生js实现图片的3d效果，附上源码

最新推荐文章于 2024-06-01 08:45:00 发布
最新推荐文章于 2024-06-01 08:45:00 发布
阅读量3k 收藏 4
点赞数 1
分类专栏： 原生js 图片特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37494755/article/details/77018127
版权
3D *{margin:0;padding:#000;}body{overflow:hidden;background:#000;}#perspective{perspective:1000px;/*景深*/}#wrap{position:relative;width:133px;height:200px;border:2px solid red;m
摘要由CSDN通过智能技术生成
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D</title>
<style type="text/css">
*{margin:0;padding:#000;}
body{overflow:hidden;background:#000;}
#perspective{
perspective:1000px;/*景深*/
}
#wrap{
position:relative;
width:133px;
height:200px;
border:2px solid red;
margin:150px auto;
transform-style:preserve-3d;
transform:rotateX(-10deg) rotateY(0deg);
}
#wrap img{
position:absolute;
top:0;
transform:rotateX(0deg)
最低0.47元/天 解锁文章
echo.T
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
php框架 三维图展示,HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）
weixin_34055346的博客
03-10 997
前言在现在市面上很多全景H5的环境下，要实现全景的方式有很多，可以用css3直接构建也可以用基于threeJs的库来实现，还有很多别的制作全景的软件使用本教学适用于未开发过3D全景的工程狮如果觉得内容太无聊可以直接跳到最后下载代码理论整个3D全景所用的相关理论就不多说了，就稍微讲一下本案例用到的相关理论相信程序猿们会更加关注代码实现的内容这次讲解的demo是用css3DRender来构建一个正方体...
JS图片3D做展示
12-09
用js实现的3D效果，如有需要3D图展示的源码，欢迎下载！
运用JavaScript代码，使用Three.js框架在网页中实现3D效果，零基础入门Three.js，包含具体实例。
最新发布
wandertp的博客
06-01 2422
运用JavaScript代码，使用Three.js框架实现3D效果，使你的网页变得绚丽多彩，快来学习吧，从头教你如何使用Three.js框架实现3D效果。
JS实现 类似图片3D效果
weixin_34319374的博客
11-30 79
     其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已，代码很乱，所以现在有业余时间研究了下，其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路。效果如下： 可能录制的时候 有点卡 。 具体思路： 1. 首先和左右箭头切换图片思路是一模一样的 点击下一页按钮时候 外层容器left =  一张图片的宽度×当前的索引index 同理 点击上一页...
js实现3D图片展示效果
10-20
本文主要介绍了js实现3D图片展示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
原生JS实现逼真的图片3D旋转效果详解
Lucky铂爵
06-17 2046
HTML： <body><div class="box"> <img src="./img/1.jpg" alt=""> <img src="./img/2.jpg" alt=""> <img src="./img/3.jpg" alt=""> <img src="./img/4.jpg" alt=""> <img src="./img/5.jpg" alt=""> <img src="./im
JS点击切换图片3D效果
03-26
JS点击切换图片3D效果 这个国外开发的JS，效果很棒的
原生JS实现图片翻书效果
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个图片翻书效果。这个效果通常用于创建交互式的电子书或展示册，让用户体验到类似实体书翻页的动态视觉效果。通过以下步骤，我们可以理解并实现这样的功能： 1. *...
基于原生JS实现图片裁剪
10-21
基于原生JS实现图片裁剪是一种常见的前端图像处理技术，它涉及到JavaScript的事件处理、DOM操作以及坐标计算等多个方面。主要分为两个步骤：前端的裁剪区域选择和后台的处理。前端部分主要利用JavaScript监听鼠标...
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js特效3D图片相册效果
07-21
很受用的js特效啊3D图片相册效果纯Dw+js就可以实现
基于WebGL实现3D图片特效
12-12
这是一款基于WebGL实现3D图片特效。该特效利用WebGL和一张特定的黑白图片，制作出在鼠标移动时的3D图片特效。
JavaScript实现的灯光反射效果
07-10
JavaScript灯光反射效果，这个效果通过JS实现了灯光反射效果，很酷吧。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发哦~~其属于MM应用引擎的应用开发部署工具，它是基于云计算基础架构，依托中国移动IDC资源池基础业务的互联网应用开发运行托管平台，为Web和移动应用开发者提供应用开发、测试、跨平台编译（Android/iOS）、应用发布和云端托管一站式服务，帮助开发者快速构建和维护应用。
用JS制作炫酷的化学周期表
weixin_45647046的博客
09-08 668
炫酷的化学周期表 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>炫酷的化学元素周期表</title> <sty
图片3D旋转(js)
m0_49378755的博客
01-22 1219
图片3D旋转
使用js加产品图片实现3D效果
weixin_44317275的博客
11-10 1604
使用js加产品图片实现3D效果 先看效果图 实现思路： 通过对不同的产品图的显示隐藏来控制3d效果，通过定时器控制产品图的显示隐藏实现产品的自动旋转 实现步骤 1.第一步先加载所有的图片，iImgCount代表图片的数量，this.imgName代表图片的目录和图片名字。图片加载完毕之后自动旋转3d的效果，当手滑动屏幕或者是鼠标点击时通过计算滑动的距离比例来计算3d显示的位置！废话不多说，䁖䁖代码！！！ // 图片生成 createImg() { for (let i = 0; i &
HTML+CSS+JS--3D相册
青竹雾色间.的博客
04-27 2194
​。
原生js实现图片懒加载的源码
03-29
以下是原生js实现图片懒加载的源码： ```javascript // 获取所有需要懒加载的图片元素 const lazyImages = document.querySelectorAll("img.lazy"); // 判断图片是否在可视区域内 function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 加载图片 function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } // 监听window的滚动事件 window.addEventListener("scroll", function () { // 遍历需要懒加载的图片元素 for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ``` 首先，我们获取所有需要懒加载的图片元素： ```javascript const lazyImages = document.querySelectorAll("img.lazy"); ``` 接着，我们定义一个函数`isInViewport`用于判断图片是否在可视区域内。该函数会返回一个布尔值，表示图片是否在可视区域内： ```javascript function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } ``` 然后，我们定义一个函数`loadImage`用于加载图片。该函数会将图片的`src`属性设置为`data-src`属性的值，并移除`lazy`类： ```javascript function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } ``` 最后，我们监听`window`的滚动事件，遍历所有需要懒加载的图片元素，如果图片在可视区域内，则调用`loadImage`函数加载图片： ```javascript window.addEventListener("scroll", function () { for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

echo.T

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值