我總是假設 CSS 變換操作會按順序發生，所以我有點驚訝地看到它transform: rotate(45deg) scaleX(2)顯示的是旋轉的矩形而不是菱形。當將比例應用于父元素時它會起作用。然而我的問題是：我怎樣才能改變一個示例（它如何不起作用）：https://jsfiddle.net/avpqjL0y/1/
3 回答
慕姐4208626
TA貢獻1852條經驗 獲得超7個贊
您可以按此順序使用縮放和旋轉來獲得結果。
#main {
display:flex;
justify-content:center;
align-items: center;
height:100vh;
}
#inner {
width:100px;
height:100px;
background-color: #f00;
transform:scaleX(.8) rotate(45deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
<div id="inner"></div>
</div>
</body>
</html>
- 3 回答
- 0 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消