移动前端项目小三角上方文字，
小三角.jpg
transform:rotate(-45deg)浏览器前缀问题用sass中@mixin更便捷
/*HTML*/
<div class="test">test</div>
<br />
/* CSS(scss) */
// generic transform
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}
// scale
@mixin scale($scale) {
@include transform(scale($scale));
}
// translate
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
@include transform(skew(#{$x}deg, #{$y}deg));
}
//transform origin
@mixin transform-origin ($origin) {
moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
.test {
@include skew(25,10);
@include transform-origin(top left);
position: absolute;
top: 25%;
bottom: 25%;
left: 25%;
right: 25%;
background-color: rgba(20,20,20,.5);
}
