专栏首页算法与编程之美网页|JS实现3D旋转相册

网页|JS实现3D旋转相册

问题描述

3D旋转相册是通过perspective属性的盒子1产生向网页内部的延伸感,并让装有图片沿z轴平移后的盒子2在拥有perspective属性的盒子1内凭transform属性产生的3d效果沿盒子2y轴旋转转动来实现的。

解决方案

1.属性介绍

(1)perspective属性:

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。定义时的perspective属性,它是一个元素的子元素,透视图,而不是元素本身。

注意:perspective 属性只影响 3D 转换元素。

(2)transform属性:

应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

语法:

transform: none|transform-functions

transform中的x、y、z、轴的含义如图所示:

2.实现方法

设置一个div,为其加上perspective的属性(撑开空间),方便后边观察效果

#perspective{ perspective: 700px; }/*此属性是实现旋转木马的要点,能产生空间上的距离/延伸感。在此盒子中放置图片的盒子便可以实现向网页内部延伸的感觉*/

设置装有图片盒子的容器wrap,使其居中显示,并加上position:relative的属性,让其内的图片定位。并加上transform属性。

#wrap{ position: relative; width: 200px; height: 200px; margin: 150px auto; border: 1px solid black; transform-style: preserve-3d; /*实现3d效果的关键步骤,与boxshadow配合使用可以忽略层级问题,之后会说到*/ transform: rotateX(0deg) rotateY(0deg) ;//为盒子的3d效果和旋转效果做准备。 }

加入图片,设置样式,使用position:absolute;使其重叠。以数组的形式获取,并根据其数组长度length来计算图片的旋转角度。

#wrap img{ position: absolute; width: 200px; }

<script> var oImg = document.getElementsByTagName('img'); var Deg = 360/oImg.length; oWrap = document.getElementById('wrap'); /*顺便拿一下容器*/ </script>

遍历数组,使其沿y轴旋转Deg度。此处使用了原型,使用foreach方法遍历了数组,让其内每个图片都执行了function(el,index)。使用index下标区分开了数组内每个图片需要旋转的不同度数(第一张0°(Deg * 0) 第二张Deg度 (Deg* 1) 第三张(Deg * 2)度…)

/*oImg表示数组对象,function(el,index)表示数组内每个对象要执行的函数,index为其下标。*/ Array.prototype.forEach.call(oImg,function(el,index){ el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)"; // el.style.zIndex = -index; el.style.transition = "transform 1s "+ index*0.1 +"s"; });

做完上一步操作后,让盒子其内图片沿Z轴平移translateZ(350px)属性便能初步看到3d效果,但此时会发现容器内图片数组出现了层级问题(Zindex)导致了理应在后面的图片能被显示出来。

/*加上沿z扩散*/ <script> Array.prototype.forEach.call(oImg,function(el,index){ el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)"; //沿z轴扩散350px }) </script> -------执行完毕后--------加上属性观察效果--------- #wrap{ width: 200px; height: 200px; position: relative; margin:150px auto; transform-style: preserve-3d; /*实现3d效果的关键步骤,与boxshadow配合使用可以忽略层级问题*/ } #wrap img{ position: absolute; width: 200px; box-shadow: 0px 0px 1px #000000; /* 用box-shadow配合transform-style: preserve-3d;可以忽略层级问题 *

这时候为装有图片的盒子加上transform:rotateX(-15deg);便能看到较为完整的3d效果了,此时实现盒子绕y轴转动便可实现旋转木马的效果。

单纯使盒子转动就可以实现图像,我们使用setinterval来不断使其旋转。但如果想使用鼠标拖动实现旋转木马,则需要再加一些代码,使装有盒子的容器(wrap)能够根据鼠标坐标变化绕容器(wrap)自身y轴转动。

/*加上沿z扩散*/ <script> Array.prototype.forEach.call(oImg,function(el,index){ el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)"; //沿z轴扩散350px }) </script> -------执行完毕后--------加上属性观察效果--------- #wrap{ width: 200px; height: 200px; position: relative; margin:150px auto; transform-style: preserve-3d; /*实现3d效果的关键步骤,与boxshadow配合使用可以忽略层级问题*/ } #wrap img{ position: absolute; width: 200px; box-shadow: 0px 0px 1px #000000; /* 用box-shadow配合transform-style: preserve-3d;可以忽略层级问题 *

END

实习主编 | 王楠岚

责 编 | 杨金月

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:杨金月

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Html|Vue实战小项目-购物车

    在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进...

    算法与编程之美
  • Java|Java生成Excel表

    最近遇到一个问题,就是在系统页面上加一个Excel表格导出的问题,这个问题很好解决啊,写一个JS把后台给的数据导出到Excel表格不就行了吗。然而当我们在测试的...

    算法与编程之美
  • 前端|CSS信封的制作方法

    利用Hbuilder来制作一个信封,此处使用的是先制作信封边框再进行文字加入的方法来设计。

    算法与编程之美
  • JS实现OO机制

    一、简单原型机制介绍 继承是OO语言的标配,基本所有的语言都有继承的功能,使用继承方便对象的一些属性和方法的共享,Javascript也从其他OO语言上借鉴了这...

    郑小超.
  • 剑指offer - 最小的k个数 - JavaScript

    题目描述:输入整数数组 arr ,找出其中最小的 k 个数。例如,输入 4、5、1、6、2、7、3、8 这 8 个数字,则最小的 4 个数字是 1、2、3、4。

    心谭博客
  • 如何清理 Docker 占用的磁盘空间

    Docker 很占用空间,每当我们运行容器、拉取镜像、部署应用、构建自己的镜像时,我们的磁盘空间会被大量占用。

    dys
  • 目标检测算法之评价标准和常见数据集盘点

    前面只顾着讲算法,讲损失,讲训练参数设置和细节,缺忽视了一个重要的东西,那就是目标检测的评价标准是什么?这一节,我们就来搞懂这个问题。

    BBuf
  • C/C++中static关键词的作用

    1、在函数体内的static变量作用范围是该函数体,其只被内存分配一次,所以在下次调用的时候会保持上一次的值。 2、模块内的static全局变量可以被模块内的所...

    用户1215536
  • H5多媒体能力

    ###事件 | 事件 | 描述 | | —- | —- | | abort | 在播放被终止时触发。| | canplay | 在媒体数据已经有足够的数据(至少...

    Tiffany_c4df
  • 专栏 | 目标检测算法之评价标准和常见数据集盘点

    前面只顾着讲算法,讲损失,讲训练参数设置和细节,缺忽视了一个重要的东西,那就是目标检测的评价标准是什么?这一节,我们就来搞懂这个问题。

    AI研习社

扫码关注云+社区

领取腾讯云代金券