需求如题,想了下用普通的变换如旋转、缩放、位移都是无法实现的。
无奈之下谷歌,网友们提供了两个实现方式,第一个是通过border的方式,这个比较tricky;第二种方式很吸引人,原来变换中除了我上面提到的三种方式之外,还有一个skew,英文意思是歪曲,正是实现平行四边形的利器。
width: 200px;
height: 100px;
background-color: blue;
transform: skew(15deg,0);
接下来我们看看这个skew函数怎么工作的
从MDN网站上看到的介绍
skew(ax, ay)
其中
ax Is an representing the angle to use to distort the element
along the abscissa.
字面意思是沿着x轴进行变形,那就是相对纵轴变形了;同理ay是沿着y轴,就是相对x轴变形。
还有这么一句话规定了变形的规则
The coordinates of each point are modified by a value proportionate to
the specified angle and the distance to the origin; thus, the farther
from the origin a point is, the greater will be the value added it.
这句话告诉我们离原点越远的坐标改变越大,而且这种改变是等比例的。
我们了解下屏幕坐标系长什