空间转换和平面转换研究

✾℡南风未恋̶̶ღ̶̶

已于 2024-01-19 21:54:55 修改

阅读量383

点赞数 10

文章标签：平面

于 2023-12-02 15:36:43 首次发布

本文链接：https://blog.csdn.net/qq_61990666/article/details/134752580

版权

1.定义

其实空间转换，不是说什么盒子变立体，不再是盒子了。不是的。空间转换是盒子可以在Z轴方向上移动。可以不再与父盒子相交，这是空间。平面则是z方向上不可以移动，旋转都可以。我们盒子无论是空间还是平面，都是存在三维上的，然后投影到二维。都是我们的眼睛王屏幕上投影这个。

2.如何才能变成空间

给父标签设置，transfrom-style:perserve-3d子标签盒子在z方向可以动。这样就是空间。

老师所加的定位，父标签旋转都只是辅助只要设置transfrom-style:perserve-3d，就是空间。之后的transfrom都是一样的。当父标签盒子移动，旋转，无论空间还是平面上，子标签的盒子都会跟着，无论子标签是否旋转，即使子标签离开了内容区域。父标签内有transfrom的子标签，还占原来的位置，后面的标签放在一样的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            height: 200px;
            width: 200px;
            background-color: pink;
         
        
          /* transform-style: preserve-3d; */
          /* transform: rotateY(40deg); */
         
        }
        .b{
            /* position:absolute; */
            /* top:0; */
            height: 100px;
            width: 100px;
            background-color: yellow;
            transform: rotateY(40deg); 

        }
       
    </style>
</head>
<body>
    <!-- 平面上，父标签移动，旋转。子标签如何？ -->
    <!-- 一个面，子标签也旋转，移动，还在内容区域，的左上角放 -->
    <div class="a">
        <div class="b"></div>
    </div>
    <!-- 平面上，子标签移动旋转，父标签如何， -->
    <!-- 在内容区域的投影，子标签盒子旋转平移。父标签没变化。 -->


    <!-- 平面上，子标签移动后，旋转后，父标签再次移动旋转，子标签会怎样？ -->
    <!-- 子标签在内容区域旋转后的，再跟着父标签动。其中一个子标签移动旋转到了其他地方，不管
    只当占了那原本的文档流，其他子标签还是占下面，都是旋转的，有重合的，后面的标签压前面的，但如果
    是一个转，平移，一个原地点，则是变化的那一个。即使不在内容区域了。 -->


    <!-- 空间上，没有定位的时候，父标签移动旋转，子标签如何？ -->
    <!-- 子标签还是跟着. -->

    <!-- 空间上，没有定位，子标签子标签移动旋转，父标签如何， -->
    <!-- 不如何 -->
    <!-- 空间上，没有定位，子标签移动后，旋转后，父标签再次移动旋转，子标签会怎样？ -->
    <!-- 子标签旋转完跟着动 -->
    <!-- 空间上，有定位，子标签旋转 -->
    <!-- 有定位。相对定位放那，如何transfrom也是让它动。 -->


</body>
</html>