HTML5、css3、js实现3D相册

最新推荐文章于 2023-06-12 18:39:03 发布

小ji同学

最新推荐文章于 2023-06-12 18:39:03 发布

阅读量1k

点赞数

分类专栏： js特效文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/y_z_s_a/article/details/122346516

版权

本文介绍了如何使用HTML5、CSS3和JavaScript实现3D相册。通过设置3D转换样式`transform-style: preserve-3d;`，结合`onmouseover`和`onmouseout`事件，当鼠标悬停时改变立方体的样式，创建出动态的3D效果。详细阐述了3D转换的基础知识，包括3D变换方法和事件处理。

摘要由CSDN通过智能技术生成

想法

实现

一、基础知识

1.3D转换 transform-style: preserve-3d;

**本例通过在div的class中设置相同的类名，然后在js方法中通过document.getElementsByClassName("类名")[在相同类名中排第几个，从0开始计数].style.transform，来依次修改每个正方形的3D效果，以此来达到鼠标悬停时效果的改变。

二、代码实现

**这是我的文件目录，直接使用代码的话注意修改目录啊

想法

这个3D相册大概就是：里面一个立方体，外面一个立方体，当鼠标悬停在外面的立方体时，外面的立方体会做出相应的改变。有了想法接下来就是想实现的方法了。

实现

立方体可以通过css3里面的3D转换来实现；鼠标悬停可以通过多种方式来实现：hover、onmouseover等，由于此处需要当鼠标悬停在一个面上时整个立方体都要做出样式的修改，故我使用了onmouseover在js中对立方体的每个面都进行修改。

一、基础知识

1.3D转换 transform-style: preserve-3d;

①简述

与我们知道的3D一样，css3中的3D效果也是对立体空间的设置，即包括x轴、y轴、z轴的三个方向上的设置（包括位移、旋转和缩放等），具体使用如下：

②使用

**在使用3D转换之前我们需要先将其转换为3D元素：transform-style: preserve-3d;然后就是对每个面进行相应的旋转和位移了。

在本例中，此处具体讲解立方体的绘制方法：

假定正方体的每个面的小正方形的长宽为100px，我们在可以创建六个div，这六个div分别是上下、左右、前后。6个div创建之后会以二维的形式叠加在一起，因此你此处只能看到一个正方形，但实际是由有6个的只是叠加在了一起。我们需要对这些正方形转换成3D元素：transform-style: preserve-3d; 然后对各个面的正方形进行样式处理，对于上面的正方形：沿x轴旋转-90度，沿z轴平移50px；对于下面的正方形：沿x轴旋转90度，沿z轴平移50px；对于左边的正方形：沿y轴旋转90度，沿z轴旋转50px；对于右面：沿y轴旋转-90度，沿z轴旋转-50px；对于前面：只用沿z轴平移50px；对于后面：也只用沿z轴平移-50px。

对正方体的绘制方法并不唯一，此处只是我使用的方法。

③3D转换方法

这里有本例中使用的一些3D转换方法：

translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转