преобразовать масштаб после поворота

Question

У меня проблема.Я поворачиваю div на 45 градусов.Затем я хочу масштабировать его по новой оси y http://jsfiddle.net/P37g5/2/, а не по оси y, которая сейчас находится под углом 45 градусов?

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);
}

HTML

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

(Посмотреть на jsFiddle)