旋转后变换比例

Question

我有个问题.我正在旋转一个45度的div.然后我想在新的y轴http://jsfiddle.net/P37g5/2/上缩放它- 而不是现在在45度的y轴？

Answer 1

我不确定我是否正确理解了这个问题,但是如果你改变了转换的顺序,你div就会沿着常规的y轴缩放:

div {
    margin: 50px 0 0 50px;
    float: left;
    width: 28px;
    height: 28px;
    background: rgba(240,240,240,1);
    border-top: 1px solid black;
    border-right: 1px solid black;
    -moz-transform: scale(1, 1.5) rotate(45deg);
    -webkit-transform: scale(1, 1.5) rotate(45deg);
}

编辑: 来自w3.org:如果提供了变换列表,则净效果就好像每个变换都是按照提供的顺序单独指定的.

Answer 2

您可以像这样包装您的对象：

CSS

span {
    margin: 50px 0 0 50px;
    float: left;
    width: 28px;
    height: 28px;
    background: rgba(240,240,240,1);
    border-top: 1px solid black;
    border-right: 1px solid black;
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
}
div{
    -moz-transform:scale(1, 5); 
    -webkit-transform:scale(1, 5);
}

超文本标记语言

<div>
    <span></span>
</div>

（在 jsFiddle 上查看）