实例:利用HTML5+CSS3实现3D转换效果

作者:袖梨 2022-06-25

前言

本文介绍的是css3的3d模块,对大家具有一定的参考价值,感兴趣的朋友们下面来一起看看吧。

介绍

首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向。

不理解的话可以参考定位属性的z-index属性,那个在某种意义上就是让元素在z轴的移动。

在2d转换模块中我们研究了rotateX()和rotateY()方法,就是绕x轴和y轴旋转,这其实就是3d模块的一种表现,当然要看到近大远小的3d效果,还需要在父元素上添加透视属性:transform:perspective(500px);值为透视点到元素的距离,具体概念请看美术透视教学。。。。

多说无益,上代码:

 

 代码如下复制代码

        Title        1  

 

效果图:

 

但是,你会发现当父元素转到90度的时候元素消失了,这就说明元素是没有厚度的。说明元素虽然具有了近大远小的透视属性,但本质上仍是2d的。

这是你需要添加transform-style:preserve-3d;样式来让元素在3d空间中转换。这样,元素就处在了3维的空间里,当父元素旋转90度,仍能看到里面的子元素。

示例代码:

 代码如下复制代码
        Title        1  

  

 

效果图:  

  

上面,我们对3d转换模块有了一个初步的了解,下面我们一起做一个正方体,来整理一下3d模块的知识。

一步步来做着写太过麻烦,我就将过程写在代码的注释里,小伙伴们请见谅。

代码:

 

 代码如下复制代码

        转换模块-正方体    
            
  • 1
  •     
  • 2
  •     
  • 3
  •     
  • 4
  •     
  • 5
  •     
  • 6

 

效果图:

这个方法比较好理解,理解了之后请看下一个。

代码在下面:

 

 代码如下复制代码

        Title        1    2    3    4    5    6

 

效果图:

这种写法只要理解了,写起来会更加的方便,而且不不用去考虑转换的角度不对会导致内容是反的,所以推荐这一种写法。当然这种写法在x轴和y轴一起旋转是也会造成内容的反转。

相关文章

精彩推荐