好吧，这几天忙公司的项目有点搁置了。
对于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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。