@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