成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實(shí)現(xiàn)一個(gè)平行四邊形

JayChen / 2767人閱讀

摘要：無奈之下谷歌，網(wǎng)友們提供了兩個(gè)實(shí)現(xiàn)方式，第一個(gè)是通過的方式，這個(gè)比較第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個(gè)，英文意思是歪曲，正是實(shí)現(xiàn)平行四邊形的利器。

需求如題，想了下用普通的變換如旋轉(zhuǎn)、縮放、位移都是無法實(shí)現(xiàn)的。
無奈之下谷歌，網(wǎng)友們提供了兩個(gè)實(shí)現(xiàn)方式，第一個(gè)是通過border的方式，這個(gè)比較tricky；第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個(gè)skew，英文意思是歪曲，正是實(shí)現(xiàn)平行四邊形的利器。

width: 200px;
height: 100px;
background-color: blue;
transform: skew(15deg,0);

接下來我們看看這個(gè)skew函數(shù)怎么工作的
從MDN網(wǎng)站上看到的介紹
skew(ax, ay)
其中

ax Is an  representing the angle to use to distort the element
along the abscissa.

字面意思是沿著x軸進(jìn)行變形，那就是相對(duì)縱軸變形了；同理ay是沿著y軸，就是相對(duì)x軸變形。

還有這么一句話規(guī)定了變形的規(guī)則

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.

這句話告訴我們離原點(diǎn)越遠(yuǎn)的坐標(biāo)改變?cè)酱?，而且這種改變是等比例的。

我們了解下屏幕坐標(biāo)系長(zhǎng)什么樣子。

可以看到原點(diǎn)在左上角，x軸向右延伸，y軸向下延伸。
回頭看上面的例子transform: skew(15deg,0);中第一個(gè)參數(shù)表示沿著x軸的變化，就是相對(duì)y軸的變化，這個(gè)變化值是15deg，正好就是我們畫出的效果圖。

再來看看上面提到的用border如何實(shí)現(xiàn)。
實(shí)現(xiàn)思路是通過拼兩個(gè)三角形來模擬平行四邊行，而矩形又可以通過border來實(shí)現(xiàn)，我們先看看如何實(shí)現(xiàn)一個(gè)三角形

如圖可以隱藏另外三個(gè)邊來實(shí)現(xiàn)一個(gè)三角形，兩個(gè)三角形就可以形成一個(gè)平行四邊形
三角形的斜率可以通過寬高比不同來實(shí)現(xiàn)。

 

 .orgram:before {
    content: "";
    display:block;
    position: absolute;
    border: 10px solid transparent;
    border-top-color: red;
    height: 0px;
    width: 0px;
}

.orgram:after {
    content: "";
    display:block;
    position: absolute;
    left: 18px;
    margin-top:-10px;
    border: 10px solid transparent;
    border-bottom-color: red;
    height: 0px;
    width: 0px;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117397.html

相關(guān)文章

  • 用 CSS 實(shí)現(xiàn)三角形與平行四邊形

    摘要：所以我們需要加一個(gè)內(nèi)層元素，并對(duì)內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果實(shí)現(xiàn)代碼如下，另附示例上?？偨Y(jié)第一種方法使用屬性出三角形，并通過對(duì)三個(gè)元素進(jìn)行拼接最終實(shí)現(xiàn)了平行四邊形而第二種方法則通過來得到平行四邊形。 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 最近在逛某個(gè)技術(shù)網(wǎng)站的時(shí)候，感覺文章關(guān)鍵詞上的樣式好酷炫啊。于是我將那種寫法照搬到了我的博客中，也許最近逛過我博客的小伙伴已經(jīng)發(fā)現(xiàn)...

    Martin91 評(píng)論0 收藏0

  • 實(shí)現(xiàn)一個(gè)平行四邊形

    摘要：無奈之下谷歌，網(wǎng)友們提供了兩個(gè)實(shí)現(xiàn)方式，第一個(gè)是通過的方式，這個(gè)比較第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個(gè)，英文意思是歪曲，正是實(shí)現(xiàn)平行四邊形的利器。 需求如題，想了下用普通的變換如旋轉(zhuǎn)、縮放、位移都是無法實(shí)現(xiàn)的。無奈之下谷歌，網(wǎng)友們提供了兩個(gè)實(shí)現(xiàn)方式，第一個(gè)是通過border的方式，這個(gè)比較tricky；第二種方式很吸引人，原來變換中除了我上面提到的三種...

    svtter 評(píng)論0 收藏0

  • 王飛躍等：生成式對(duì)抗網(wǎng)絡(luò) GAN 的研究進(jìn)展與展望

    摘要：引用格式王坤峰，茍超，段艷杰，林懿倫，鄭心湖，王飛躍生成對(duì)抗網(wǎng)絡(luò)的研究與展望自動(dòng)化學(xué)報(bào)，論文作者王坤峰，茍超，段艷杰，林懿倫，鄭心湖，王飛躍摘要生成式對(duì)抗網(wǎng)絡(luò)目前已經(jīng)成為人工智能學(xué)界一個(gè)熱門的研究方向。本文概括了的研究進(jìn)展并進(jìn)行展望。 3月27日的新智元 2017 年技術(shù)峰會(huì)上，王飛躍教授作為特邀嘉賓將參加本次峰會(huì)的 Panel 環(huán)節(jié)，就如何看待中國(guó) AI學(xué)術(shù)界論文數(shù)量多，但大師級(jí)人物少的現(xiàn)...

    xiaokai 評(píng)論0 收藏0

  • MEXC Global科普：Polkadot波卡平行鏈插槽拍賣是什么

    摘要：波卡平行鏈插槽拍賣在即，一文帶你了解波卡的架構(gòu)以及插槽拍賣的機(jī)制。要成為波卡的平行鏈，則必須通過插槽來接入。波卡將使用一個(gè)基于的隨機(jī)信標(biāo)，來追溯確定拍賣的結(jié)束時(shí)間。其由波卡網(wǎng)絡(luò)提供支持，由進(jìn)行開發(fā)。 Polkadot波卡平行鏈插槽拍賣在即，一文帶你了解波卡的架構(gòu)以及插槽拍賣的機(jī)制。 波卡區(qū)...

    Dr_Noooo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<