@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