JS实现3D旋转图片

想将图片3D旋转展示出来，如下图所示

要想3D展示，需要在样式中设置 transform-style属性为preserve-3d，根据图片的数量计算旋转度数，给每一张图片设置上旋转角度，使图片展开围成一个圈

for (var i = 0; i < aImg.length; i++) {aImg[i].style.transform = "rotateY(" + i * 40 + "deg)translateZ(226px)";}

展开后设置图片的展示效果，当前展示图片有前后各一张，设置其旋转角度，还有图片旋转时的首尾连接效果

function changeImg(index) {oCon.style.transform = "rotateY(" + -index * 40 + "deg)";//判断前后两张图片var now = index % 9;var beforeImg = now - 1;var afterImg = now + 1;//开头和结尾if (now == 8) {afterImg = 0;}if (now == 0) {beforeImg = 8;}aImg[afterImg].style.transform = "rotateY(" + afterImg * 40 + "deg)translateZ(226px) rotateY(-45deg)";aImg[beforeImg].style.transform = "rotateY(" + beforeImg * 40 + "deg)translateZ(226px) rotateY(45deg)";//ratetaY()不会覆盖，是在原有角度上再次转动一定度数aImg[now].style.transform = "rotateY(" + now * 40 + "deg)translateZ(226px) rotateY(0deg)";//加类之前先清空类(设置当前图片高亮显示)for (var i = 0; i < aImg.length; i++) {aImg[i].className = "";}aImg[now].className = "active";}

JS实现3D旋转图片相关推荐

3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
使用three.js和CSS3DRenderer.js构建3D空间图片
分为两个部分,html部分和js引入部分,自己感兴趣也可以去three.js官网看,都有源码 three.js gitHub库地址:https://github.com/mrdoob/three.js ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
效果演示: 文末获取源码代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️
效果演示: 代码目录: 主要代码实现: css样式: /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url( ...

JS实现3D旋转图片

JS实现3D旋转图片相关推荐

最新文章

热门文章