SASS transform mixins

移动前端项目小三角上方文字,


小三角.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);
}

参考网址:https://codepen.io/sawmac/pen/qGudy

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 5,419评论 0 6
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 2,919评论 0 59
  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 17,496评论 0 19
  • 一个好标题直接影响了文章的打开率、推荐量,如果是广告软文,标题更会影响最终的转化率。今天来总结归纳下网络上流传的月...
    新衣筏阅读 22评论 0 0
  • 拿给同事看近来几天写下的文字,都很夸张的轻呼,“哇,你好有才,你怎么做到的”。 我不知道自己有没有才,...
    张三姑娘05阅读 57评论 0 2