好吧，这几天忙公司的项目有点搁置了。
对于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>