< Back to Coding, SASS

Rotate and scale mixin

@mixin rotate($deg,$ox:50%,$oy:50%){
-ms-transform: rotate($deg); /* IE 9 */
    -ms-transform-origin: $ox $oy; /* IE 9 */
    -webkit-transform: rotate($deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: $ox $oy; /* Chrome, Safari, Opera */
    transform: rotate($deg);
    transform-origin: $ox $oy;
}

The default of the point of rotation is set to the middle (50%,50%). An example of using this mixin is:

.priceTag { @include rotate(45deg,0%,100%); }

Next is scale:

@mixin scale($x,$y,$ox:50%,$oy:50%){
-ms-transform: scale($x,$y); /* IE 9 */
-ms-transform-origin: $ox $oy; /* IE 9 */
    -webkit-transform: scale($x,$y); /* Safari */
    -webkit-transform-origin: $ox $oy; /* Chrome, Safari, Opera */
    transform: scale($x,$y);
    transform-origin: $ox $oy;
}
which works in a similar way:
.priceTag { @include scale(1.5,1.5,0%,100%); }
Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *