CSS 2D/3D转换

最新推荐文章于 2023-09-19 21:57:41 发布

Bug真菌

最新推荐文章于 2023-09-19 21:57:41 发布

阅读量195

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_55730337/article/details/129852068

版权

本文介绍了CSS中的2D转换，包括translate()用于平移，rotate()用于旋转，skew()用于倾斜，以及scale()用于缩放。同时，也探讨了3D转换，如perspective()定义透视视图，translate3d()实现3D平移，rotate3d()执行3D旋转，以及transform-style控制子元素的3D呈现方式。

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

一、2D转换 transform

1、平移translate()

transform: translate(x,y): 定义 2D 转换，沿着 X 和 Y 轴移动元素

<body>
    <div></div>

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }

        /* 鼠标滑过的属性 */
        div:hover{
            transform: translate(50px,50px);
        }

        body{
            /* flex布局，让子元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
    </style>
</body>

2、旋转rotate()、

transform: rotate(angle)：定义 2D 旋转，在参数中规定角度。

正角度为顺时针旋转，负角度为逆时针旋转

<body>
    <div></div>

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }

        /* 鼠标滑过的属性 */
        div:hover{
            transform: rotate(-50deg);
        }

        body{
            /* flex布局，让子元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
    </style>
</body>

3、倾斜skew()

transform:skew(x-angle,y-angle)：定义 2D 倾斜转换，沿着 X 和 Y 轴。

<div></div>

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }

        /* 鼠标滑过的属性 */
        div:hover{
            /* 转换成平行四边形 */
            transform: skew(30deg,0deg);
        }

        body{
            /* flex布局，让子元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
    </style>

4、缩放scale()

transform: scale(x,y);

定义 2D 缩放转换，改变元素的宽度和高度。

<div></div>

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }

        /* 鼠标滑过的属性 */
        div:hover{
            /* 等比例扩大1.5倍数 */
            transform: scale(1.5,1.5);
        }

        body{
            /* flex布局，让子元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
    </style>

二、3D转换

1、透视属性perspective()

perspective(n)：定义 3D 转换元素的透视视图。

又称视距，即人眼到屏幕的距离，设置3d平移时如果不设置视距，则z轴上的平移无效果。

2、 3D平移translate3d()

translate3d(x,y,z)：定义3D转换

需要配合视距

<div style="background-color: red;"></div>
    <div class="d1"></div>
    <div style="background-color: blue;"></div>

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }
    

        /* 鼠标滑过的属性 */
        .d1:hover{
            /* perspective(1000px) 假设观察者距离屏幕1000px */
            transform: perspective(1000px) translate3d(10px, 10px, 400px);
        }

        body{
            /* flex布局，让子元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
    </style>

3、3D旋转rotated3d()

rotate3d(x,y,z,angle)：定义3d旋转

x,y,z只是角度比例，如下示例：

/* 沿x轴旋转45度 */
transform:  rotate3d(1,0,0,45deg);

/* 沿y轴旋转45度 */
transform:  rotate3d(0,1,0,45deg);

/* 沿z轴旋转45度 */
transform:  rotate3d(0,0,1,45deg);

<div style="background-color: red;"></div>
    <div class="d1"></div>
    <div style="background-color: blue;"></div>

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }
    

        /* 鼠标滑过的属性 */
        .d1:hover{
            transform:  rotate3d(1,1,1,45deg);
        }

        body{
            /* flex布局，让子元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
    </style>

4、子元素是否3d呈现。transform-style的效果。

transform-style: flat|preserve-3d;

preserve-3d 是 CSS 中用来控制 3D 转换元素的层级关系的属性。它可以设置为 "preserve-3d" 或 "flat"。当设置为 "preserve-3d" 时，子元素会保留它们的 3D 空间，并且能够相对于父元素进行转换。当设置为 "flat" 时，子元素会被平面化，不能相对于父元素进行转换

当transform-style: flat;时：

当transform-style: preserve-3d;时：

<div class="fu">
        <div class="zi1 xz"></div>
        <div class="zi2 xz"></div>
    </div>

    <style>
        .fu{
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            position: relative;
            transform-style: preserve-3d;
        }
        .zi1{
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .zi2{
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: blue;
            transform: rotate3d(1,1,1,99deg);
        }

        body{
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

    </style>