Rotate and scale mixin

Posted on

in

,
@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%); }

Leave a Reply

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

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930