transformar escala después de rotar

Question

Tengo un problema. Estoy rotando un div 45 grados. Luego quiero escalarlo en el nuevo eje y http://jsfiddle.net/P37g5/2/ - ¿No es el eje y que ahora está a 45 grados?

Answer 1

Usted puede envolver su objeto como éste:

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> 

(View on jsFiddle)

Answer 2

no estoy seguro de entender la pregunta correctamente, pero si cambia el orden de las transformaciones, su div se escala a lo largo del eje y normal:

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

Editar:From w3.org: Si se proporciona una lista de transformaciones, luego el efecto neto es como si cada transformación se hubiera especificado por separado en el orden proporcionado.