Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use JavaScript to make a cool 3D picture. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

First, the display of special effects on the page

Note: the above effect picture is only part of the effect, forgive me for not learning self-made gif map!

Second, function description

1. Open the page and all the pictures will rotate automatically.

2. The size and interval of the picture can be changed with the mouse wheel scrolling.

3. Press and hold the mouse anywhere on the page, drag the cursor, and the page can rotate with it.

Third, function realization

1. Create a parent container and stack all the photos on top of each other

The code is as follows (html):

3D Tiktok Carousel

two。 Animate all the photos with rotation

The code is as follows (js):

Function init (delayTime) {/ / animate all pictures for (var I = 0; I

< aEle.length; i++) { aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)" aEle[i].style.transition = "transform 1s" aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + 's' }}setTimeout(init, 1000) 3.监听鼠标事件 代码如下（js）： // 滚轮滚动// 监听鼠标滚轮事件，该函数不用调用直接生效_document.onmousewheel = function(e){ // console.log(e) e = e || window.event var d = e.wheelDelta / 10 || -e.detail radius += d init(1)} var sX,sY,nX,nY,desX = 0 , desY = 0, tX = 0,tY = 0;// 鼠标拖动页面_document.onpointerdown = function(e){ // console.log(e); e = e || window.event//防止出错,如果e不存在，则让window.event为e var sX = e.clientX, sY = e.clientY //监听鼠标移动函数 this.onpointermove = function(e){ console.log(e); e = e || window.event//防止出错,如果e不存在，则让window.event为e var nX = e.clientX, nY = e.clientY; desX = nX - sX;//在x轴上滑动的距离 desY = nY - sY; tX += desX * 0.1 tY += desY * 0.1 // 让页面跟着鼠标动起来 applyTransform(oDarg) } this.onpointerup = function(e){ //每个多久实现一次setInterval oDarg.timer = setInterval(function(){ desX *= 0.95 desY *= 0.95 tX += desX * 0.1 tY += desY * 0.1 applyTransform(oDarg) playSpin(false) if(Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5){ clearInterval(oDarg.timer) playSpin(true) } },17) this.onpointermove = this.onpointerup = null } return false}function applyTransform(obj){ if(tY >

TY = 180 if (tY < 0) tY = 0 obj.style.transform = `rotateX (${- tY} deg) rotateY (${tX} deg) `} function playSpin (yes) {oSpin.style.animationPlayState = (yes? Running': 'paused')} this is the end of the article on "how to use JavaScript to make a cool 3D picture". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.