CODEWITHSUNDEEP
css
user623520
user623520

Reputation:

transform scale after rotate

I have a problem. I am rotating an div 45 degrees. I then want to scale it on the new y axis http://jsfiddle.net/P37g5/2/ - not the y axis that is now at 45 degrees?

Upvotes: 12

Views: 20107

Answers (2)

jeroen
jeroen

Reputation: 91762

If you change the order of the transformations, your div is scaled along the regular y-axis:

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

From w3.org: If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided.

Upvotes: 17

Linens
Linens

Reputation: 7942

You can wrap your object like this:

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)

Upvotes: 4

Related Questions