带你领略3D转换的魅力~

最新推荐文章于 2024-06-04 14:05:44 发布

啵啵丶

最新推荐文章于 2024-06-04 14:05:44 发布

阅读量243

点赞数 8

分类专栏： Html 文章标签： 3d

本文链接：https://blog.csdn.net/m0_53620413/article/details/119615392

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、什么是3D？
二、3D转换的常用属性
总结

一、什么是3D？

与平面坐标系的2D相比，3D是三维坐标系，除了有X轴和Y轴，还多了垂直屏幕的Z轴，它的特点就是近大远小、物体后面遮挡不可见。所以有了3D就能使图片动画变得立体生动，下面就让我们来看看它的几个常用属性吧~

二、3D转换的常用属性

1.3D位移：translate3d(x,y,z)

用法：

translform:translateX(100px):仅仅是在x轴上移动；
translform:translateY(100px):仅仅是在y轴上移动；
translform:translateZ(100px):仅仅是在z轴上移动；
(注意：translateZ一般用px单位)
translform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离

注意：
xyz是不能省略的，如果没有就写0

在这里插入图片描述
上图就是三维坐标系，其中x轴：水平向右（为正值）；y轴：垂直向下（为正值）；z轴：垂直屏幕（往外面为正值，即越往外看到的图片就越大）。

2.3D旋转：rotate3d(x,y,z)

3D旋转指可以让元素在三维平面内沿着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为角度(了解即可)；

transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg；

下面我们来看一个由旋转实现的效果图：
在这里插入图片描述
图中的粉色盒子就是以x轴为中心，正方向旋转了120度。为了我们方便观看前后效果，我又将整体沿着y轴往左旋转了30度，具体代码如下：

<style>
        body {
            perspective: 500px;
            /*它是透视的意思，这里没看懂没关系，下面会讲这个属性*/
        }

        .box {
            position: relative;
            /*子盒子用了绝对定位，父盒子就要用相对定位*/
            width: 200px;
            height: 300px;
            margin: 100px auto;
            transform: rotateY(-30deg);
            /*整体盒子沿y轴向左转30度，为负方向所以为负值*/
            transform-style: preserve-3d;
            /*为了使3D呈现的属性，下面也会讲*/
        }

        .up1,
        .up2 {
            position: absolute;
            /*因为两个盒子要重叠放在一起所以要用定位*/
            width: 100%;
            height: 100%;
        }

        .up1 {
            background-color: skyblue;
            z-index: 1;
            /*为了让它在上面，提高它的优先级*/
        }

        .up2 {
            background-color: pink;
            transition: all 5s;
            /*过渡一下，使他变化的没那么生硬*/
        }

        .box:hover .up2 {
            transform: rotateX(120deg);
            /*当鼠标放上去的时候，粉色盒子开始转动角度*/
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="up1"></div>
        <div class="up2"></div>
    </div>
</body>

上面的图片其实是一个动态的效果，当鼠标放上去，粉色盒子就会转动，离开就归位，让人的视觉有一个3D变化的效果。

3.透视：perspective

透视也称为视距：视距就是人的眼睛到屏幕的距离

透视越大，物体越小
（这里不要和上面z轴的距离搞混了，因为z轴越大是离我们眼睛越近，所以物体越大，而透视代表的是人的眼睛到屏幕的距离，越大代表越远，所以看到的物体就小了）

透视的单位是像素

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

举例（将图片沿x轴旋转60度）：
①：没加透视前
在这里插入图片描述
②往父盒子加了透视后：

相信大家都看出来了，加了透视后，我们很明显的能看到一种前大后小的效果，这就是透视的魅力~ 所以这也是重中之重，要想看到3d效果必须加透视，而且是在父盒子加！

4.3D呈现：transform-style

意义：控制子元素是否开启三维立体环境

语法：

transform-style：flat 子元素不开启3d立体空间（默认）

transform-style: preserve-3d; 子元素开启立体空间

注意：代码写给父级，但是影响的是子盒子
（这个属性很重要）

还是拿上面盒子倾斜为案例，在加了透视但是没加3D呈现时的效果：
在这里插入图片描述
尽管鼠标放上去了，也看不到任何效果，因为粉色盒子并没有按立体空间来展示，被转换成平面展示了，所以这里就要用到transform-style这个属性，来实现子元素开启立体空间。

当然在加上3D呈现效果后，结果就是第一个案例呈现的效果。

总结

想要实现3D转换效果，千万不要忘记写perspective和transform-style: preserve-3d，并且这两个属性都是加在父盒子上的哟，想要真正的掌握，就赶紧去试试吧~

啵啵丶

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
7
评论
带你领略3D转换的魅力~

文章目录一、什么是3D？二、3D转换的常用属性1.3D位移：translate3d(x,y,z)2.3D旋转：rotate3d(x,y,z)3.透视：perspective4.3D呈现：transform-style总结一、什么是3D？与平面坐标系的2D相比，3D是三维坐标系，除了有X轴和Y轴，还多了垂直屏幕的Z轴，它的特点就是近大远小、物体后面遮挡不可见。所以有了3D就能使图片动画变得立体生动，下面就让我们来看看它的几个常用属性吧~二、3D转换的常用属性1.3D位移：translate3d(x,
复制链接

扫一扫