HTML---2D动画---倾斜(详解)

案列详解：

• 可以看出，控制元素进行倾斜的函数就是transform：skew(参数1，参数2),另外两个函数是上面函数的一部分，skewX(参数):就是在水平方向上倾斜，skewY(参数):在垂直方向上倾斜。
• 函数transform：skew(参数1，参数2)，参数1表明在水平方向上倾斜的度数，参数2表明在垂直方向上倾斜的度数(参数后的单位必须为deg，不能默认不写)，参数有正负之分，在html页面布局中，水平向右为正，垂直向下为正，反之为负。
• 因此在div3中，水平倾斜，倾斜度数为正，所以向右倾斜
• 因此在div4中，垂直倾斜，倾斜角度为正，所以向下倾斜

案例1：

实现向左倾斜和向上倾斜10度

掌握好transform:skew()即可实现，同时通过transform实现skewx()和skewy()需要需要写在一起，中间不能有逗号，也不能分开写。