python写的平行四边形_实现一个平行四边形

需求如题,想了下用普通的变换如旋转、缩放、位移都是无法实现的。

无奈之下谷歌,网友们提供了两个实现方式,第一个是通过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.

这句话告诉我们离原点越远的坐标改变越大,而且这种改变是等比例的。

我们了解下屏幕坐标系长什

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值