旋转后应用CSS缩放
我总是假设 CSS 变换操作会按顺序发生，所以我有点惊讶地看到它transform: rotate(45deg) scaleX(2)显示的是旋转的矩形而不是菱形。
当将比例应用于父元素时它会起作用。然而我的问题是：我怎样才能改变一个
示例（它如何不起作用）：https://jsfiddle.net/avpqjL0y/1/
梦里花落0921浏览 93回答 3
3回答
-
千巷猫影
只需滑动变换属性中值的顺序即可：transform: scaleX(2) rotate(45deg)变换从右向左执行。 -
陪伴而非守候
您必须使用scaleX的状态；）div {//... transform: rotate(45deg) scale(2) } -
慕姐4208626
您可以按此顺序使用缩放和旋转来获得结果。#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>
随时随地看视频慕课网APP
相关分类
Html5