CSS3的3D转换

最新推荐文章于 2023-05-19 09:11:17 发布

JJ_Smilewang

最新推荐文章于 2023-05-19 09:11:17 发布

阅读量1.1k

点赞数 3

分类专栏： html5和CSS3提高文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124140121

版权

html5和CSS3提高专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了CSS3中的3D转换，包括3D位移、3D旋转和透视原理。详细讲解了translate3d、rotate3d以及透视属性perspective的使用方法，通过实例展示了如何创建立体效果。同时，提到了transform-style属性对于开启3D立体环境的重要性。

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

CSS3中的特效除了有前面介绍的2D转换，还有3D转换。所谓3D转换，就是模拟我们生活的环境，通过代码在屏幕上把物体显示出3D效果，让人看起来具有立体效果。

1. 三维坐标系

那在介绍正式内容之前，我们一样先来了解下三维坐标系，所谓三维坐标系，就是在原有的二维坐标系上加上了一个z轴，这样就形成了一个立体空间，如下图所示：

①x轴：水平向右注意： x 右边是正值，左边是负值
②y轴：垂直向下注意： y 下面是正值，上面是负值
③z轴：垂直屏幕注意：往外面是正值，往里面是负值

2. 3D转换

3D转换我们主要学习工作中最常用的 3D 位移和 3D 旋转，所以今天就主要介绍这两种特效。

2.1 3D位移 translate3d

3D位移就是在2D位移的基础上，多加了一个可以移动的方向——z轴方向。因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动。

语法：

transform:translate3d(x,y,z);   /* 其中 x、y、z 分别指要移动的轴的方向的距离 */

也可以只移动一个方向，如下：
translform:translateX(100px);   /* 仅仅是在x轴上移动 */
translform:translateY(100px);   /* 仅仅是在Y轴上移动 */
translform:translateZ(100px);   /*仅仅是在Z轴上移动（注意：translateZ一般用px单位） */

2.2 透视 perspective

如果我们给z轴一个移动距离，可以发现根本没有任何效果，这个是因为想要在网页上产生3D效果需要透视。

所谓透视，也可以称为视距：视距就是人的眼睛到屏幕的距离。我们都知道眼睛距离物体越近，物体越大，反之，离得越远，物体越小，这就是常说的近大远小视觉立体。

上图中， d：表示视距，就是人的眼睛到屏幕的距离，d越小，意味着我们的眼睛距离物体越近，所以我们看到的物体就越大。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值），那么意味着物体越往外，则距离我们的眼睛越近，所以我们看到的物体就越大。

语法：

body {
      perspective: 400px;    /* 透视 要写在被观察元素的父盒子上面的 */
}

注意点：透视写在被观察元素的父盒子上面的。

2.3 Z轴位移translateZ

translform:translateZ(100px);  /* 仅仅是在Z轴上移动 */
有了透视后，就能看到上述代码translateZ 引起的变化了。

变化规则：
① translateZ：往外是正值，并且值越大，物体越大
② translateZ：往里是负值，并且值越小，物体越小
综上，z轴位移，数值越大，物体越大；反之，数值越小，物体越小。

2.4 3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。

语法：

transform:rotateX(45deg);       /* 沿着x轴 旋转 45度 */
transform:rotateY(45deg);       /* 沿着y轴 旋转 45度 */
transform:rotateZ(45deg);       /* 沿着Z轴 旋转 45度 */
transform:rotate3d(x,y,z,deg);  /* 沿着自定义轴旋转 前三个参数要么写1，要么写0 ，1表示绕着对应轴旋转，0则表示不旋转， deg为角度 */

比如：
transform:rotate3d(1,0,0,30deg);  /*表示绕着x轴旋转 30度； */

绕着x轴旋转，可以想象为单杆运动员在单杆上进行上下旋转，如下图所示：

绕着y轴旋转，可以想象为钢管舞舞者在绕着钢管左右旋转，如下图所示：

绕着z轴旋转，可以想象为转盘顺时针或逆时针旋转，如下图所示：

对于元素3d旋转中绕x轴和y轴方向的判断，使用的是左手准则。

左手准则
①左手的手拇指指向 x轴的正方向
②其余手指的弯曲方向就是该元素沿着x轴旋转的方向（旋转值为正值）

左手准则
①左手的手拇指指向 y轴的正方向
②其余手指的弯曲方向就是该元素沿着y轴旋转的方向（旋转值为正值）

旋转值负值时，旋转反向相反。

2.5 3D呈现 transfrom-style

transfrom-style属性是控制子元素是否开启三维立体环境，这个属性很重要，后面必用。
①transform-style: flat 子元素不开启3d立体空间默认的
② transform-style: preserve-3d; 子元素开启立体空间
③注意：代码写给父级，但是影响的是子盒子

2.6 代码感知

<style>
    body {
        /* 如果想让子元素有3d的效果  必须给父元素设置透视 */
        perspective: 400px;
        /* 如果想让子元素有3d的效果  也必须给父元素设置 transform-style */
        /* transform-style默认值是flat */
        transform-style: preserve-3d;
    }
    .a,
    .b {
        position: absolute;
        top: 200px;
        left: 200px;
        width: 200px;
        height: 200px;
        transition: all 2s;
    }  
    .a {
        background-color: red;
    }  
    .b {
        background-color: purple;
    }
    .b:hover {
        transform: rotateX(90deg);   /* 鼠标移入，b盒子绕着x轴旋转90° */
    }
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
在未开启三维立体环境之前，得到的效果是左上图。

开启三维立体环境后，也就是增加了代码： transform-style: preserve-3d; 后，得到的效果是右上图，明显更具有立体感。因此在进行3D转换时，要记得给父元素增加上 transform-style: preserve-3d; 开启三维立体环境。