实现一个平行四边形
需求如題,想了下用普通的變換如旋轉、縮放、位移都是無法實現的。
無奈之下谷歌,網友們提供了兩個實現方式,第一個是通過border的方式,這個比較tricky;第二種方式很吸引人,原來變換中除了我上面提到的三種方式之外,還有一個skew,英文意思是歪曲,正是實現平行四邊形的利器。
接下來我們看看這個skew函數怎么工作的
從MDN網站上看到的介紹
skew(ax, ay)
其中
along the abscissa.
字面意思是沿著x軸進行變形,那就是相對縱軸變形了;同理ay是沿著y軸,就是相對x軸變形。
還有這么一句話規定了變形的規則
The coordinates of each point are modified by a value proportionate tothe 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.
這句話告訴我們離原點越遠的坐標改變越大,而且這種改變是等比例的。
我們了解下屏幕坐標系長什么樣子。
可以看到原點在左上角,x軸向右延伸,y軸向下延伸。
回頭看上面的例子transform: skew(15deg,0);中第一個參數表示沿著x軸的變化,就是相對y軸的變化,這個變化值是15deg,正好就是我們畫出的效果圖。
再來看看上面提到的用border如何實現。
實現思路是通過拼兩個三角形來模擬平行四邊行,而矩形又可以通過border來實現,我們先看看如何實現一個三角形
如圖可以隱藏另外三個邊來實現一個三角形,兩個三角形就可以形成一個平行四邊形
三角形的斜率可以通過寬高比不同來實現。
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎
總結
- 上一篇: 使用amap-js引入高德地图AMap及
- 下一篇: 阿里云ARMS重磅推出小程序监控,助力小