yisu鏄瑙勭殑鑰佺墝鎻愪緵鍟嗭紝鎻愪緵浜戜富鏈恒€侀珮闃叉湇鍔″櫒銆丆DN銆丏NS绛変骇鍝侊紝浠ヤ究鎹烽珮鏁堛€佽秴楂樻€т环姣斻€佽秴棰勬湡鍞悗绛変紭鍔垮崰棰嗗競鍦猴紝涓鸿澶氱綉绔欐彁渚涗簡楂橀€熴€佺ǔ瀹氱殑鎵樼鏈嶅姟銆?/p>

鍙互浣跨敤CSS鐨則ransform灞炴€ф潵璁剧疆瀛椾綋鍊炬枩瑙掑害銆倀ransform灞炴€у彲浠ュ鍏冪礌杩涜鏃嬭浆銆佺缉鏀俱€佸€炬枩绛夊彉鎹紝鍏朵腑鍊炬枩鍙互浣跨敤skew()鍑芥暟鏉ュ疄鐜般€俿kew()鍑芥暟鎺ュ彈涓や釜鍙傛暟锛屽垎鍒〃绀烘按骞虫柟鍚戝拰鍨傜洿鏂瑰悜鐨勫€炬枩瑙掑害锛屽崟浣嶄负搴︺€?/p>

绀轰緥浠ｇ爜锛?/p>

/* 鍚戝彸鍊炬枩10搴?*/

transform: skew(10deg, 0);

/* 鍚戝乏鍊炬枩10搴?*/

transform: skew(-10deg, 0);

/* 鍚戜笂鍊炬枩10搴?*/

transform: skew(0, 10deg);

/* 鍚戜笅鍊炬枩10搴?*/

transform: skew(0, -10deg);

鍙互灏嗚灞炴€у簲鐢ㄤ簬鍗曚釜鍏冪礌锛屼篃鍙互灏嗗叾搴旂敤浜庡叏灞€鏍峰紡銆傞渶瑕佹敞鎰忕殑鏄紝鍊炬枩瑙掑害鍙兘浼氬奖鍝嶅埌鍏冪礌鐨勫竷灞€鍜屼綅缃紝闇€瑕佹牴鎹疄闄呮儏鍐佃繘琛岃皟鏁淬€?/p>

绀轰緥浠ｇ爜锛?/p>

/* 鍗曚釜鍏冪礌 */

h1 {

transform: skew(10deg, 0);

}

/* 鍏ㄥ眬鏍峰紡 */

body {

transform: skew(-10deg, 0);

}