我总是假设 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 关注
- 92 浏览
添加回答
举报
0/150
提交
取消