Based on the article from http://css-tricks.com/. I desided update it, so I’m inluding: “CSS3 perspective”, “CSS3 backface-visiblity” and a “legacy transform” to the mixin.less file.
transform property
|
1 2 3 4 5 6 7 8 9 10 |
.transform(@arguments) { -webkit-transform: rotateY(@arguments); -moz-transform: rotateY(@arguments); -o-transform: rotateY(@arguments); -ms-transform: @arguments; transform: rotateY(@arguments); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } |
How to use it
You can use it as any other LESS element.
|
1 |
.transform(180deg); // don't forget the 'deg' measure unit |
scale property
|
1 2 3 4 5 6 7 |
.scale(@ratio){ -webkit-transform: scale(@ratio); -moz-transform: scale(@ratio); -ms-transform: scale(@ratio); -o-transform: scale(@ratio); transform: scale(1@ratio); } |
How to use it
You can use it as any other LESS element.
|
1 |
.scale(@ratio:1); |
backface-visibility property
|
1 2 3 4 5 6 7 |
.backface(@arg) { -webkit-backface-visibility:@arg; -moz-backface-visibility:@arg; -ms-backface-visibility:@arg; -o-backface-visibility:@arg; backface-visibility:@arg; } |
How to use it
You can use it as any other LESS element.
|
1 |
.backface(hidden); |
DEMO
This is a tiny improvement, but I hope it can help you.