The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.
The following code skews the paragraph element by -32 degrees along the X-axis.
p { transform: skewX(-32deg); }
練習題目：
Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property.
練習代碼：
1 <style> 2 div { 3 width: 70%; 4 height: 100px; 5 margin: 50px auto; 6 } 7 #top { 8 background-color: red; 9 } 10 #bottom { 11 background-color: blue; 12 transform: skewX(24deg); 13 } 14 </style> 15 16 <div id="top"></div> 17 <div id="bottom"></div>
效果：
- 藍色的和紅色一樣的
- 通過skewX，讓藍色的上下邊不動，左右在水平方向（延X軸）傾斜了24度，上下不動，左右移動，
- 經測驗，skewY，讓藍色的左右兩邊，延垂直方向（Y軸）傾斜，左右不動，上下移動，如下圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/116169.html
標籤：Html/Css
上一篇：FCC---Use the CSS Transform scale Property to Scale an Element on Hover