CSS第十一天学习总结—— CSS3 3D转换_css3 3d旋转从左到右从右到左-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52819925/article/details/119280660

本文详细介绍了CSS3的3D转换，包括3D坐标系、translate3d、perspective及其与translateZ的关系，以及rotate3d的各种旋转方式。通过实例展示了3D导航栏和旋转木马的效果，并探讨了浏览器的私有前缀兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3D转换（变换）

3d转换是改变标签在3坐标系上的位置和形状的一种技术。

3D特点：

近大远小。
物体后面遮挡不可见

在这里插入图片描述

3维坐标系

3维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

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

在这里插入图片描述

z轴理解：

上图中的网格面板，即可理解为电脑屏幕。
眼睛到屏幕的线，就是z轴。
眼睛离屏幕越近，z轴越小。进入屏幕是负值。

3d移动 translate3d

3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向

语法：

translform: translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离
translform: translateX(100px)  仅仅是移动在x轴上移动
translform: translateY(100px)  仅仅是移动在Y轴上移动
translform: translateZ(100px)  仅仅是移动在Z轴上移动

注意：

一般都用px为单位，不用%为单位
xyz不能省略，如果没有就写0

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
     
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }
        
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px);
            transform: translateY(100px); */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1. translateZ 沿着Z轴移动 */
            /* 2. translateZ 后面的单位我们一般跟px */
            /* 3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的） */
            /* 4. 3D移动有简写的方法 */
            /* transform: translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* 5. xyz是不能省略的，如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

注意:

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，想要看到，可以使用视距属性设置

视距 perspective

perspective视距：就是用来设置人和物体的距离（近大远小）

透视写在被观察元素的父盒子上面

在这里插入图片描述

上图总结：

d：视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。   
(近大远小：视距变小，眼睛离屏幕越来越近，物体离眼睛越来越近，物体变大----近大 )

z：translateZ，物体距离屏幕的距离，z轴距离与物体大小的关系成正比。 
(近大远小：translateZ变大，物体离眼睛越近，物体变大 ----- 近大)

z，并不是z轴，其实是translateZ。视距和translateZ其实都是在Z轴上的距离。

例子：物体在z轴上的移动的 远大近小

设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
设置人和物体的距离（视距）这个值规定要设置给物体的父元素 perspertive:1000px
动态改变物体的 translateZ 即可观察效果

    /* 父元素 */
    body {
   
      /* 视距 */
      perspective: 1000px;
    }

    /* 目标 */
    div {
   
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* z轴的移动 */
      transform: translateZ(0px);
    }

在这里插入图片描述

注意：这个效果很像放大效果，但其实是不一样的。

perspective与translateZ

perspective是给父元素添加的，而translateZ是给自己添加的。

应用：

一个父盒子中有多个子盒子。
我们给父盒子设置一个固定的视距perspective，然后子盒子设置不同的translateZ，这样子盒子就会有一个相同视距下的不同的大小。
物体想实现3D效果，必须添加透视perspective。

如何使用：

父元素添加一个固定的perspective，子元素再添加translateZ，才会有3D效果。必须配合使用。

虽然两个都可以让盒子大小改变，但是必须配合使用才行。

让盒子变大变小，一般不会改变perspective，而是是调整translateZ来改变。

总结

translateZ的值和perspertive都要大于0 否则容易出现兼容性问题

translateZ：近大远小（translateZ距离近（值越大）物体越大，近大）

translateZ：往外是正值

translateZ：往里是负值

3d旋转 rotate3d

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

语法：

transform: rotateX(45deg); 沿着x轴正方向旋转 45度
transform: rotateY(45deg); 沿着y轴正方向旋转 45deg
transform: rotateZ(45deg); 沿着Z轴正方向旋转 45deg
transform: rotate3d(x,y,z,deg);  沿着自定义轴旋转 deg为角度（了解即可）

效果如图：

在这里插入图片描述

rotateX

在这里插入图片描述

X轴旋转示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
     
            perspective: 300px;
        }
        
        img {
     
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
     
            transform: rotateX(45deg); /* 图片向后倒，向屏幕内部倒 */
            transform: rotateX(-45deg); /* 图片向前倾，向屏幕外部倒  */
        }
    </style>
</head