cssskew（超市扫收款二维码为什么不需要密码）-前端-引导者

本文目录一览：

首先准备一个HTML文档cssskew，文档中准备好两个图片，接下来会对这两个图片进行旋转。然后对HTML中cssskew的内容定义一些样式，如下图所示，主要是标题以及ul的样式。接下来就给图片所在的li定义宽高，如下图所示。

把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动cssskew了。

那么要在原变形基础上修改。就像你在一个地方声明了字号，又在另一个地方为元素声明了不同的字号一样，字号是不叠加的。只有其中一个字号起作用。不过动画变形除外，不管使用过渡还是真正的动画，效果是叠加的。

CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

首先新建一个html文件，添加一个DIV，设置宽度和高度，以及背景色填充为红色。然后在父级DIV中插入一个子DIV，定义它的宽高，以及背景色（background：#fff；）。

skewX() ：按给定的角度沿X轴指定一个skew transformation(斜切变换)。skewX是使元素以其中心为基点cssskew，并在水平方向(X轴)进行扭曲变行cssskew，同样可以通过transform-origin来改变元素的基点。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

skew -webkit-transform：scale(2)；-webkit-transform：skew(20deg，20deg)transition：过渡主要是用在css3中过渡形状、颜色、位置等。

制作平行四边形：平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

skew[x，y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；scale3d(x，y，z) 用来放大缩小效果，属性是比值；matrix3d，css矩阵。