乐趣区

kkw学习css的过程第8天2D转换的旋转与倾斜理解

jiezi

好吧，这几天忙公司的项目有点搁置了。
对于 css 的中两个地方还是不熟悉。
第一个，关于 2D 转换中的旋转
第二个，关于 2D 转换中的倾斜

1、首先旋转的效果图：


在上面，我是将旋转的角度设置为 30°，它会沿着 X 轴的方向，去旋转一定的距离。

这个效果图是，旋转了 180°，会发现它被反转了位置。

因为在 2D 的事件中，旋转没有出现按照 Y 轴旋转的东西，所以我目前自己理解都是按照 X 轴进行旋转的。

所写的代码如下。

<style>
    *{padding: 0;margin: 0}
    .warp1{
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .warp2{
        width: 800px;
        height: 800px;
        border: 1px solid;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .warp3{
        width: 300px;
        height: 300px;
        background-color: lightpink;
        transition: all 2s;
        /*transform-origin: center;*/
    }
    .warp3:hover{transform: rotate(180deg); /* 可以自己更改数值 */
    }


    .warp4{
        height: 6px;
        background: coral;
        width: 100%;
    }
</style>
<body class="warp1">
    <div class="warp2">
        <div class="warp3"> 我是会发生变化的部分 </div>
        <div class="warp4"></div>
    </div>


</body>

2、关于 skew()。倾斜

一开我甚至以为，倾斜与旋转的差不多的，样子甚至没多大的区别。然后果断的被打脸。

上面是 X 方向倾斜 30deg，Y 轴的方向为 0deg。我们看到是，容器没有超过线条。


上面是 y 轴方向的倾斜 30deg,X 的方向为 0。容器跟旋转有点像，都超过了线条，但是与之差别的是，旋转过后，容器还是一个正方形没有改变，但是倾斜过后，容器变为了平行四边形。发生了形状的改变。
我理解的倾斜是，

如果两个人面对面站着。

X 轴的倾斜 是你直面看过去，看到他左右摇晃。

Y 轴的倾斜 是你直面看过去，他身体没有左右摇晃，但是旋转了一个角度。

类似军训的时候，教官站立不动面对我们喊的口号，向左转，向右转（向左右边转一个角度），这个时候从他的角度看，我们是在 y 轴倾斜了一个指定的度数。
当按照 X 轴的是, 当容器旋转 90 度的时候，会与 X 轴平行。也可以假装是我下面设置的那条横线。

当 shew()设置的是一个值的时候，那么那只是对于 X 轴的旋转。


上述是 X 与 Y 都是旋转 30 度的样子

当自己测试的时候，可以增加动画的时间长度更加好理解。
还有单独的设置一个角度。设置为 45deg 是我的感觉比较好的。
<style>
    *{padding: 0;margin: 0}
    .warp1{
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .warp2{
        width: 800px;
        height: 800px;
        border: 1px solid;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .warp3{
        width: 300px;
        height: 300px;
        background-color: lightpink;
        transition: all 6s; /* 改它的值让动画更加慢，看效果明显 */
        /*transform-origin: center;*/
    }
    .warp3:hover{transform: skew(0deg,45deg); /* 单独设置 X 的值或者 Y 的值 */
        /* 90deg 180deg 360deg 45deg(X 轴最佳) Y 轴(看个人)*/
    }


    .warp4{
        height: 6px;
        background: coral;
        width: 100%;
    }
</style>
<body class="warp1">
    <div class="warp2">
        <div class="warp3"> 我是会发生变化的部分 </div>
        <div class="warp4"></div>
    </div>


</body>
退出移动版